Clicking a grid Bootstrap does not work properly

Question

I am using a premium Wordpress theme based on Twitter Bootstrap. The theme is called StrapPress. I'm just going with the grid and trying to set things up in a very simple way, but the grid is acting in a weird way. What I want is a section of main content consisting of nine columns and a sidebar of three. In nine columns, I want to have nested columns with different areas of content: on one page, the first section will consist of nine columns, and then the content below it will be divided into three equal sections.

The following code installs it perfectly without the first section in 9 columns:

<div class="row-fluid"> <!-- MAIN FLUID CONTAINER --> <div class="span9 redBorder" id="content"> <!-- MAIN CONTENT --> <div class="span4 redBorder"> <div class = "contentPlaceholder"> BLOG </div> </div> <div class="span4 redBorder"> <div class = "contentPlaceholder"> RECIPE </div> </div> <div class="span4 redBorder"> <div class = "contentPlaceholder"> LISTING </div> </div> </div> <!-- END OF MAIN CONTENT --> <div class="span3 redBorder" id="sidebar" style="height: 450px;"> <!-- SIDEBAR --> SIDE </div> <!-- END SIDEBAR --> </div> <!-- END OF MAIN FLUID CONTAINER --> 

"RedBorder" simply adds a 1 pixel red frame around everything to render.

However, as soon as I add the next section, it affects the content below. Here is the new code:

  <div class="row-fluid"> <!-- MAIN FLUID CONTAINER --> <div class="span9 redBorder" id="content"> <!-- MAIN CONTENT --> <div class="searchSection redBorder" style="height: 100px;"> SEARCH SECTION </div> <div class="span4 redBorder"> <div class = "contentPlaceholder"> BLOG </div> </div> <div class="span4 redBorder"> <div class = "contentPlaceholder"> RECIPE </div> </div> <div class="span4 redBorder"> <div class = "contentPlaceholder"> LISTING </div> </div> </div> <!-- END OF MAIN CONTENT --> <div class="span3 redBorder" id="sidebar" style="height: 450px;"> <!-- SIDEBAR --> SIDE </div> <!-- END SIDEBAR --> </div> <!-- END OF MAIN FLUID CONTAINER --> 

Here's what it looks like:

Does anyone know why he is doing this? Why does adding some content at the beginning of these nine columns cause these columns below to add gaskets to them so that they no longer fit into their container?

Answer 1

This is due to the way the grid works with strings and spans, in particular this rule in Bootstrap CSS:

 .row-fluid [class*="span"]:first-child { margin-left: 0; } 

Therefore, why adding content at the beginning means that other span * elements get margin before them. SearchSection is full width, so the first span4 wraps to the next line and has markup. Assuming you want the search area to be full width, a safe way would be to add another fluid line around span4s:

  <div class="searchSection redBorder" style="height: 100px;"> SEARCH SECTION </div> <div class="row-fluid"> <div class="span4 redBorder"> <div class = "contentPlaceholder"> BLOG </div> </div> <div class="span4 redBorder"> <div class = "contentPlaceholder"> RECIPE </div> </div> <div class="span4 redBorder"> <div class = "contentPlaceholder"> LISTING </div> </div> </div> </div> <!-- END OF MAIN CONTENT --> 

This is also explained in the section section of nested columns in the documents http://twitter.github.com/bootstrap/scaffolding.html#gridSystem .