Twitter Bootstrap grid работает не так, как ожидалось

Я использую премиальную тему 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 вокруг всего, чтобы помочь визуализировать. This is what it looks like at this point.

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

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

вот как это выглядит потом: Second part

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

1 ответов


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

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

следовательно, почему добавление содержимого в начале означает, что другие элементы span* получают маржу перед ними. 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.