0

私は常に、グリッド システムの Zurb の基盤ロジックの下で作業してきました。今、私は 3.0.2 バージョンで初めてブートストラップを試みています。ひとつわからないのは、その構造です。

Zurb は次のように動作します。

<div class="row">
    <div class="twelve columns">
    </div>
</div>

Bootstrap には、まったく同じ結果を得るために 3 ステップの構造があります。

<div class="row">
     <div class="container">
          <div class="col-lg-12">
          </div>
     </div>
</div>

私の質問は、「行」クラスは何を表しているのですか?CSSでは、いくつかのマージンを設定するだけで、疑似:after要素でレイアウトをクリアします。誰かが私にこれの論理を説明してもらえますか? 何らかの理由でその行があると確信していますが、見つかりません。

4

2 に答える 2

2

.containerレイアウトに固定幅を与えるためにのみ存在します (これは、エンドユーザー [レスポンシブ] に基づいて変更されます)。また、このクラスは実際にはページに 1 回だけ存在し、すべての.row要素をその中にラップする必要があります (したがって、その名前 (コンテナ) に準拠しています)。

.rowBootstrap は 12 列の固定レイアウトを使用するため、新しい行をキューに入れるための情報と、col-*-nブロックが占める列の数を解読するためのクラスの 1 つという2 つの情報のみが必要です。

lg列も 3 つの主要なレイアウトによって分類されmdますsm。これら 3 つのバリエーションがあるため、ブラウザーの機能に基づいてコンテンツを変更するように指定できます (たとえば、すべてのデバイスで 3 列を表示 ( md& lg) し、モバイルでは 2 列に切り替えることができます ( sm))。

そうは言っても、最も基本的なレイアウトは単純に次のもので構成されています。

<div class="row">
  <div class="col-md-12">
    single div consuming all 12 columns
  <div>
</div>
于 2013-11-12T16:44:37.320 に答える
0

私はTWBS3の基本的な知識を持っています。これは私がそれをどのように理解しているかです:

ページが、デフォルトで 12 列のテーブルであると想像してください (構成をカスタマイズしていない場合)。クラス「col-*-*」を持つ要素がある場合、col クラスによって定義されたスペースのみを使用します。これに基づいて、col-lg-4 クラスの要素が 4 つある場合、3 つの要素が並んで表示されますが、4 つ目の要素は 2 行目に描画されます。これは、3 つの col-lg-4 要素を追加すると 12 列になるため、4 番目の要素が他の要素の下に押し出されるためです。これは、要素がすべて同じ高さ (常に) である場合には良いかもしれませんが、高さが異なると、高さが小さい要素がページ内で少し高く描画されるという奇妙な結果が得られます。ROW は、行に属する要素を持つという考えを強制します。12列n行のテーブルを持つようなもの。元：

要素 1 要素 2 要素 3

要素 4

col-lg-4 の同じ 4 つの要素を使用すると、次のようなことができます。

<div class=”row>
<div class=”col-lg-4”&gt;Element 1</div><div class=”col-lg-4”&gt;Element 2</div>
</div>
<div class=”row>
<div class=”col-lg-4”&gt;Element 3</div><div class=”col-lg-4”&gt;Element 4</div>
</div>

要素 1 要素 2

要素 3 要素 4

行に使用できる 12 行のうち、4 行にまたがる 2 つの行があり、それぞれに 2 つの要素があると言っているからです。

これがお役に立てば幸いです。下手な英語でごめんなさい。

于 2013-11-12T16:53:17.757 に答える