Смещение вертикального положения элементов div в Twitter Bootstrap

Я пытаюсь правильно выровнять по вертикали смещающиеся элементы, используя Twitter Bootstrap с плавной сеткой. (Примечание: сетка настроена на 30 столбцов)

Учитывая красные поля, это попытка размещения div: http://imgur.com/IkB2G Это текущее фактическое размещение с моим кодом : http://imgur.com/oJ2mG

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

<div class="container-fluid nomargin">
<div class="row-fluid span30 nomargin"><div style="height:10px"></div></div>  <!--    Vertical spacing between menu and content-->
<div class="row-fluid">
<div class="span4"></div>
<div class="span16 white-box">
  <!--Body content-->
   <div style="height:100px"></div>
</div>
<div class="span6 white-box">
  <!--Body content-->
   <div style="height:300px"></div>
 </div>

 <div class="span16 white-box">
  <!--Body content-->
   <div style="height:100px"></div>
 </div>
 </div>

vertical-alignment html twitter-bootstrap fluid-layout
person user1318135    schedule 28.06.2012    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вам нужно думать об этом как о двух столбцах, а в левом столбце у вас есть вложенные строки. Я не могу разобрать правильные размеры из кода, который вы разместили. Но, надеюсь, этот код вдохновит вас.

<div class="row">
    <div class="span18">
        <div class="row">
            <div class="span18">This is a row on the left side.</div>
        </div>
        <div class="row">
            <div class="span18">This is a row on the left side.</div>
        </div>
    </div>
    <div class="span12">
        This is the content on the right side.
    </div>
</div>
person MDrollette    schedule 28.06.2012
comment
Эта установка работает и для гибкой компоновки. Спасибо! При использовании гибкого макета поддиапазоны основаны на количестве столбцов всей строки, а не на диапазоне столбцов родительской строки. Кроме того, я считаю, что это работает только с последней реализацией твиттера смещений для классов жидкости. - person user1318135; 04.07.2012