Щелкать сетку Bootstrap не работает как ожидалось

Question

Я использую премиальную тему Wordpress, основанную на Bootstrap Twitter. Тема называется StrapPress. Я просто собираюсь с сеткой и пытаюсь настроить вещи очень простым способом, но сетка действует странным образом. Что я хочу, это раздел основного контента, состоящий из девяти столбцов и боковой панели из трех. В девяти столбцах я хочу иметь вложенные столбцы с разными областями содержимого: на одной странице первый раздел будет состоять из девяти столбцов, а затем содержимое ниже его будет разделено на три равных раздела.

Следующий код устанавливает его хорошо без первой секции в 9 столбцов:

<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» просто добавляет 1px красную рамку вокруг все, чтобы помочь себе.

Однако, как только я добавлю следующий раздел, это повлияет на содержимое под ним. Вот новый код:

<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 --> 

Вот что это выглядит как то:

Кто знает, почему он это делает? Почему добавление некоторого содержимого в начале этих девяти столбцов приводит к тому, что эти столбцы ниже добавляют к ним прокладки таким образом, что они больше не вписываются в их контейнер?

Answer 1

Это из-за способа сетки работает со строками и пролетами, в частности, это правило в CSS Bootstrap в:

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

Следовательно, почему добавление контента в начале означает, что другой диапазон * элементы получают маржу до того их. SearchSection имеет полную ширину, поэтому первый span4 переносится на следующую строку и имеет разметку. Предполагая, что вы хотите найти в разделе полную ширину, безопасный путь должен был бы поставить другую строку-жидкость вокруг 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 --> 

Это также рода-объяснены в столбцах секции вложенности в документации, http://twitter.github.com/bootstrap/scaffolding.html#gridSystem ,