5

流体グリッドでTwitterBootstrapを使用して、オフセット要素を正しく垂直方向に整列させようとしています。（注：グリッドは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>
4

1 に答える 1

4

これを2列と考える必要があり、左側の列にはネストされた行があります。あなたが投稿したコードから適切なサイズを見つけることができません。しかし、うまくいけば、このコードはあなたにいくつかのインスピレーションを与えるでしょう。

<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>
于 2012-06-28T21:23:01.263 に答える