0

次のようなレイアウトが必要です。 ここに画像の説明を入力

その外観を実現するにはどうすればよいですか (各列はページ全体の 50% で、左側の各行は同じです)。

コンテナ流体と行流体を使用しようとしています。これが私が試したものですが、紫色の部分は...ページのはるかに下にあります。オフセットですが、左と同じレベルではありません。

<div class="container-fluid">
  <div class="row-fluid">
    <div id="top" class="span6"></div>
  </div>
    <div class="row-fluid">
    <div id="bottom" class="span6"></div>
    </div>
    <div class="row-fluid">
    <div id="canvas" class="span6 offset6"></div>
    </div>  
</div>
4

2 に答える 2

2

ネスト列のブートストラップ検索

これに似た結果になります（テストされていません）

<div class="container-fluid" style="background:yellow;height:400px;">
  <div class="row-fluid" style="height:100%;border:1px solid #aaa;">
    <div class="span6" style="height:100%;">
      <div class="row-fluid" style="height:50%;">
        <div class="span12" style="background:blue;height:100%;">a</div>
      </div>
      <div class="row-fluid" style="height:50%;">
        <div class="span12" style="background:red;height:100%;">b</div>
      </div>
    </div>
    Right side
  </div>
</div>
于 2013-07-11T16:17:40.970 に答える
1

このマークアップはニーズに合うはずです。

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span6">
            <div class="row-fluid">
                <div class="span12 red">test</div>
            </div>
            <div class="row-fluid">
                <div class="span12 red">test</div>
            </div>
        </div>
        <div class="span6 blue">
            test
        </div>
    </div>
</div>
<style>
    .red
    {
        background-color: red;
        min-height:200px;
    }
    .blue
    {
        background-color: blue;
        min-height:200px;
    }
    </style>

左マージンを削除するには、デフォルトのブートストラップ css をオーバーライドするだけです。

于 2013-07-11T16:31:47.717 に答える