Should Bootstrap container elements include line elements?

Question

From my reading of the documentation, it seems that .container is the “parent” wrapper for .row and divs that contain .spanX (where x totalals 12). However, their navigation example seems to have .row .

In addition, on its website the .container documentation .container certified by several navbar-related divs.

Can someone talk in detail about how the structure should work? I am new to this.

Answer 1

The .row class .row not required inside the .container , but it is a good idea to include it anyway when you start by wanting a few lines later.

All that .row really does is make sure that all its divs inside are displayed on a separate line, separated from the previous and next .rows .

For .container inside .navbar divs, this is a separate thing that is required for the navbar line to remain with the rest of the page. If you look further in the rendered HTML, you will see that there is another .container that is not inside any .navbar , and that is the one that contains all the main content.

Full example

 <div class="container"> <div class="row"> <!-- These divs are inline and do NOT fill up the full 12 columns --> <div class="span4">...</div> <div class="span4">...</div> </div> <!-- This is a automatically a new line of divs --> <div class="row"> <!-- This div will appear below the previous row, even though it would fit next to the other divs --> <div class="span4"></div> </div> <!-- These will appear in their own row, but may act unexpectedly in certain situations --> <div class="span4"></div> <div class="span4"></div> </div> 

In short

.row defines a string of divs, as the name suggests. Each of them points to a new line of divs, regardless of whether this line was filled or not.

Answer 2

The answer is much simpler than the one given. No, .container should not contain any specific code, and it does not have burdens in what contains it ...

What .container does is serve as a “wrapper” to “contain” the size of all and all elements enclosed within it. And .container can wrap pages or components. So, if you need a page similar to those Twitter Bootstrap documents with a “fixed” width and equal margin on both sides, then only one .container is needed to wrap all the content on the page.

There are other uses for .container ; Did you notice how the top navigation bar in Bootstrap docs ( .navbar-fixed-top ) covers the entire width of the screen, but the nav elements inside the navigation bar are "contained" in the width of the content? This is because .navbar-fixed-top not inside .container , but .nav inside it.

Answer 3

The bootstrap grid consists of 12 columns, which can be adjusted in any combination in a row as long as they are up to 12. You can consider them containment strings, such as table rows, which are intended for separate different lines of content. Inside the grid, the .row container has a separate task and is (and is required) for adjusting the last width of the gutter of the grid columns, which depends on the screen size (if a responsive sheet is included). If you look at css behind the .row class, you will notice that by default it has the margin-left:-30px property margin-left:-30px (otherwise it may be larger or smaller depending on the screen size), a property that is designed to be "deleted" the gutters from the last column in the row; without it, the grid will not reconfigure the groove, and it will break into a second line.

Now, the reason that the .row container is a child of the .container container is .container container .row intended only to separate the "lines" of content, and not to place sections or more above the central content in the page. Thus, the reason the navigation example wasn’t like this is probably due to the fact that the navigation elements did not have the width of the gutter, since it was supposed to be a complete block element, not a grid, so there was no need to reset, which remained a free gutter.