5

Twitter Bootstrap (ボックスのみ) でこのレイアウトを作成しようとしています:

ここに画像の説明を入力

基本的に、これは youtube に埋め込まれたビデオと、その右側にある 2 つの同じサイズのボックスです。

私は今これを持っています（haml）：

.row
  .span8
    / embedded code
  .span4
    / I need to put two boxes here... how?
4

3 に答える 3

3

.span*コンテナ内にブロックを積み重ねて、.row-fluid別のブロック内にネストspan*して、探している効果を作成できます。たとえば、これを試してください：

HTML

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span9">
            <div class="big box">
                box
            </div>
        </div>
        <div class="span3">
            <div class="row-fluid">
                <div class="span3">
                    <div class="box">
                        box
                    </div>
                </div>
                <div class="span3">
                    <div class="box">
                        box
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.row-fluid別のブロック内のコンテナ内に含まれる 2 つのサイド ブロックを互いに重ねてネストする方法に注目.span*してください。

少し CSS を使用すると、積み上げられ.span*たブロックを親ブロックの幅に引き延ばして、列を作成できます。

CSS

.row-fluid [class*="span"] .row-fluid [class*="span"] {
    margin-left: 0;
    width: 100%;
}

デモ: http://jsfiddle.net/k27S5/show/

HAML についてはよくわかりませんが、ドキュメントを参照すると、セットアップは次のようになります。

ハムル

.container-fluid
  .row-fluid
    .span9
      content
    .span3
      .row-fluid
        .span3
          content
        .span3
          content
于 2012-07-18T00:41:16.257 に答える
2

固定幅レイアウトを使用している場合:

.row
  .span8
  .span4
    .row
     .span4
    .row
    .span4

流動レイアウトを使用している場合:

.row-fluid
  .span8
  .span4
    .row-fluid
      .span12
    .row-fluid
      .span12

これは、Bootstrap では処理されない 2 つの列の高さを一致させることに関心がないことを前提としています。

于 2012-07-17T23:52:06.453 に答える
0

ほとんどのグリッド ベースのシステムと同様に、Twitter のブートストラップで使用されているものは、列ではなく行でレイアウトするのに役立ちます。

左側の大きなボックスを右側の 2 つのボックスと同じ高さにしたいと考えています。その場合、最も簡単な方法はテーブルを使用することです。はい、人々はテーブルに悪いラップを与えますが、特定のレイアウトではそれが最も簡単な解決策です.

<table>
  <tr>
    <td>big box on left</td>
    <td>
      <div>small top box on right</div>
      <div>small bottom box on right</div>
    </td>
  </tr>
</table>

次に、それに応じてスタイルを設定します

于 2012-07-17T23:46:58.800 に答える