53

ドキュメントを読んだところ、とを含むdiv.containerの「親」ラッパーであるように見えます（xの合計は12です）。ただし、ナビゲーションの例にはが含まれていないようです。.row.spanX.row

また、彼らのドキュメントサイトでは.container、ナビゲーションバーに関連するいくつかのdivによってラップされています。

フレームワークがどのように機能するかについて、誰かが少し詳しく説明できますか？初めてです。

4

3 に答える 3

49

この.rowクラスは内に必須.containerではありませんが、後で複数の行が必要になる場合に備えて、開始時に含めることをお勧めします。

実際に行うことは、その中のすべて.rowの div が、前の と次の から分離された独自の行に表示されるようにすること.rowsです。

divの.container内部について.navbarは、navbar をページの残りの部分と整列させるために必要な別のものです。レンダリングされた HTML をさらに下に見ると、.containerどの.navbardiv にも含まれていない別のものがあり、それがすべてのメイン コンテンツを含むものであることがわかります。

完全な例

<div class="container">
  <div class="row">
    <!-- These divs are inline and do NOT fill up the full 12 columns -->
    <div class="span4">...</div>
    <div class="span4">...</div>
  </div>

  <!-- This is a automatically a new line of divs -->
  <div class="row">
    <!-- This div will appear below the previous row, even though it
      would fit next to the other divs -->
    <div class="span4"></div>
  </div>

  <!-- These will appear in their own row, but may act
    unexpectedly in certain situations -->
  <div class="span4"></div>
  <div class="span4"></div>
</div>

要するに

.row名前が示すように、div の行を定義します。上記の行がいっぱいかどうかに関係なく、それぞれが div の新しい行を示します。

于 2012-10-21T01:23:49.443 に答える
30

答えは与えられたものよりもはるかに簡単です。いいえ、.container特定のコードを含める必要はありません。また、コードが含まれているものに制限はありません...

.containerその中にラップされたすべての要素のサイズを「含む」ための「ラッパー」として機能します。また、.containerページまたはコンポーネントをラップできます。そのため、Twitter Bootstrap のドキュメントに似たページが必要な場合、幅が「固定」され、両側が同じ余白で.containerある場合、ページ上のすべてのコンテンツをラップするために必要なのは 1 つだけです。

他にも用途があり.containerます。Bootstrap のドキュメント ( .navbar-fixed-top) の上部のナビゲーション バーが画面の幅全体に広がっているのに、ナビゲーション バー内のナビゲーション項目がコンテンツの幅に「含まれている」ことに気付きましたか? これは、 が a の内部にあるの.navbar-fixed-topでは.containerなく、.nav内部にあるためです。

于 2012-10-22T01:56:18.203 に答える