I'm confused about this part of code in the source code of bootstrap 3.3.5
/*line 1585 - 1590*/
.container {
padding-right: 15px;
padding-left: 15px;
}
/* line 1612 - 1615*/
.row {
margin-right: -15px;
margin-left: -15px;
}
what are they used for?
-------------------------------
Thanks guys!
This is my opinion after reading your answers：
1.Add padding to the .container makes the content of .container away from the boudary;
2.But this means now the first/last col is 2 paddings away from the boundary,not so nice. So add .row negative margin to streach out it to the boundary.
Am I right?
btw,I asked this question because I dnt see the difference whether I delete these two rules or not.
Generally, containers as it states, adds padding on left and right so that content doesn't go right to the edge of the screen, making it useable for mobiles and easier to read.
When using columns, these add padding left and right, which can appear 'out of alignment' against the rest of the content, so you can wrap those in a row, using negative margins to bring that padding back in line with the rest of the content.
Again, this is to make it appear more aligned and clean.
From the Bootstrap Documentation (http://getbootstrap.com/css/#grid) :
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use
rows to create horizontal groups of columns.
Content should be placed
within columns, and only columns may be immediate children of rows.
Rows should always be placed inside of a container to ensure proper spacing (between page content and the edge of the browser). If you don’t put a row inside a container, the row will be wider than the width of the viewport, causing a horizontal scrollbar.
The Bootstrap row uses negative margins to counteract the padding of the container. The end result is no visual spacing (margin or padding) on the sides of the row within the container. This is important for responsive designs to ensure even spacing since the columns may wrap or stack vertically (changing the number of columns displayed in each row).
The same is also true in Bootstrap 4.
Also see:
Bootstrap Rows and Columns - Do I need to use row?
How the Bootstrap grid works
Bootstrap columns have 15px left and right padding so that their content is properly spaced out. However, this pushes the first and last column’s content 15px away from the parent. To compensate, the row has negative left and right 15px margins. This is why you should always place columns within rows.
Related
I'm trying to create a responsive layout, with a left-hand sidebar that collapses on narrower screens. Something a bit like http://purecss.io/ but with a fixed top header as well.
My work so far (the code is really too long to reproduce here): http://jsbin.com/uhalic/3/edit
There are two problems that I'm struggling to fix (NB you'll need to make the HTML section wider than 450px to reproduce these):
(1) The last elements of the list are being shifted sideways, for no reason I can understand.
(2) The footer should be visually contained entirely within the #main (red section), and indeed that's where it is semantically, but the text is falling partly into the #sidebar (blue section).
What am I doing wrong?
It's because the red column has no <li> elements to the left of it, so there are actually 4 <li> elements in the red section which are being skewed, two are to the left of each visible one but being hidden.
You need to add a margin-left: 160px to the .results class. Then remove the width: 100% off of the .result or if you're going to keep it, have it as 100%.
Also, add margin-left: 200px to #footer
I've got a responsive 2 column layout going on. The first column is a fixed width, while the second one is using the css calc property to subtract certain pixels from its 100% width.
What I want the second column to do is to scroll horizontally, regardless of the screen size or width of it. I threw together a quick pen to illustrate what I'm trying to do: http://codepen.io/trevanhetzel/pen/nbdIt
As you can see, the second column has multiple .thing divs inside of it that are floated left and have a defined width. What I DON'T want is for these .thing divs to drop down to another line when they run out of room inside the second column.
How can this be achieved? I tried messing the overflow property, but I think I might need another container div with some different positioning properties or something. Any advice?
Here you go: http://codepen.io/seraphzz/pen/lutjb
The solution to this is:
Change .thing from float: left; to display: inline-block;. This keeps those elements in line, but also keeps them in flow so the parent element acknowledges it has children
Give section a white-space: nowrap; property. This prevents the .thing elements from going to another line.
Give section an overflow-x: auto property. This allows the div to be scrolled horizontally, but hides the scrollbar if there are not enough children to need it.
Lastly, give section a font-size: 0 property. By default, elements that are display: inline-block are treated like text, and are thus given an automatic margin. Setting font-size: 0 on the parent of those elements removes that automatic margin, allowing you to set the margin as you like. Remember, you will need to manually set the font-size of these child items if they contain text.
I have a simple 2 column layout within a centered background div.
The two columns are inside a larger div which is centered in the page. The issue is that the right column may be 1-2 pixels out and will be pushed to the bottom of the first div. How can I stop this from happening? I would prefer the second column to push outside to the right of the surrounding div.
A couple of options. You can float the left column left and the right column right. (If you do that, give the container overflow: hidden so that it wraps around the columns, and also make sure the combined widths of the columns are a bit less that the width of the container, to prevent the problem you are having and also to create a space between the two columns.)
Another option is not to float the main content column but instead (assuming it's the right column) to give it a large left margin that is slightly wider than the width of the left column. Then float the left column and just make sure it comes before the right column in the HTML.
there are other methods still, but these are perhaps the two most common.
It would be good to see your page code if more advice is needed.
The reason why the second column aligned bottom of the first column is because the sum for both column widths have exceed the size of that container, or maybe because you didn't applying floats (left/right) to that columns.
I would prefer the second column to push outside to the right of the
surrounding div
That means you want to put the column out from its container. You can apply negative value to achieve this.
Example:
.right{
position:relative; /* apply position relative */
right:-20px; /* out from the container by 20px on right */
}
Have a look at here http://jsfiddle.net/qiqiabaziz/RseAp.
I'm trying to implement relative width columns based on the oocss framework. In order to add a gutter in between the columns I added an inner div in between the columns and their content.
The problem is that I end up with columns of unequal width...
I could avoid this by having the same padding for the first and last columns but since I want to nest columns it would create a shift on the right and the left...
Here is a fiddle:
http://jsfiddle.net/WxPSm/2/
Any idea welcomed!
Thanks
.unit > .content:first-child {
padding: 0 2em;
}
The problem is with your inner .content divs. The middle column has padding being applied on both sides where as the left column only has padding on the right and the right column has only padding on the left.
The outer unit divs are all the same size. Using firebug to inspect the elements highlights the padding very well if you need a visual.
So I wanted a centered, constant width, three-column layout that was compatible with IE and whose columns would stretch to all be of equal height (equal to the height of whichever column had the tallest content). I know- keep dreaming, right?
Well I almost figured it out. After combining the techniques I found here on Stack Overflow with a nifty CSS hack for fixing width issues and the text-align trick for centering, as well as experimenting with different margin/padding values, I have a nearly perfect layout. I'm doing this for a friend's aunt and you can see what I have so far at www.allfourseasonslawncare.com/index.php (The index.html is her original site which she paid someone $500 to make for her. I'm re-creating the page using CSS)
The only bug I'm getting now is that in IE the left column has about a 30 pixel left margin, and all elements inside of the left column have a second 30 pixel left margin.
I can easily fix this using the html>body trick to give a larger negative margin to IE, but I'm trying to figure out where this magical margin is coming from so I can look for another solution. Any ideas?
It might be because your ul elements have a 30px margin. Try adding a span to each list item and then add the padding.
Also, about the layout, you shouldn't need to add margin to each column (I see you have margin on .leftRail, .rightRail, etc). I noticed your .columnWrapper element is only 615px wide, thus you're using negative margin to move these elements.
Instead, you can use a clearfix hack to effectively float elements. (Link for the CSS is below, paste it into the bottom of your CSS file)
After you placed the clearfix in your css, then you go to your wrapper div that is wrapping all of the columns and simply place a class="clearfix" on it.
Then, you just float each column left (float the .rightRail right), specify widths and voila! It should be a 100% working, less-hacky solution.
When you hack too much, IE tends to bug out. Comment if you need any help.
Clearfix: http://gist.github.com/550114
So I spent an hour or two yesterday wrestling with it and I spent another hour this morning (posting updates as I started to get closer as comments to my own question) and I've finally figured it out.
In Internet Explorer, the "width: 100%" command is interpreted as the entire width of the parent element, not the width minus padding. This was giving the table a width of 615 pixels (the width of the center column). Seeing that this would stretch beyond the container, Internet Explorer respected only the left padding and the table stretched 15 pixels (the size of the left padding) beyond the right side of the column.
Since it stretched outside of the column, this re-arranged all floating elements in a way that to Internet Explorer seemed logical. That being, for some ungodly reason, moving the left rail the distance of the right padding (15 pixels) to the right of the left padding (15 pixels into the center column), thus moving it a total of 30 pixels into the center column, or the magical 30 pixel margin.
The solution? I'm still working on this. I moved the padding from the #content div to the #center div as an experiment and this caused the issue to arise in Chrome while simultaneously resolving it in Internet Explorer. At least the primary question was answered, though. We now know where the magical 30 pixel margin was coming from. As a quick solution I've set a constant width on the #content div of 585 pixels and given it margins instead of padding.
#center{
float:left;
width:615px;
margin-right:-615px;
}
#content{
width:585px;
margin:10px 15px 10px 15px;
}