85

containerクラスとをいつ使用するか説明してくださいrow。この部分については Bootstrap のドキュメントがかなり不明確なのでわかりません。

Bootstrap 3 を使用しています。

4

6 に答える 6

1

容器

コンテナーは、レスポンシブ幅に幅の制約を提供します。レスポンシブ サイズが変更されると、変更されるのはコンテナーです。行と列はすべてパーセンテージ ベースなので、変更する必要はありません。各辺に 15 ピクセルのマージンがあり、行によってキャンセルされていることに注意してください。

行

行は常にコンテナー内にある必要があります。

行は、列が存在する場所を提供し、理想的には合計 12 になる列を持ちます。すべての列が左にフロートし、フロートがおかしくなったときに追加の行がオーバーラップしないため、ラッパーとしても機能します。

行には、両側に 15 ピクセルの負のマージンもあります。行を構成する div は、通常、コンテナーのパディングの内側に制約され、ピンク色の領域の端に触れますが、それを超えることはありません。15px の負のマージンは、コンテナの 15px のパディングの上に行を押し出し、本質的にそれを無効にします。さらに、行により、その中のすべての div が、前後の行から分離された独自の行に表示されるようになります。

コラム

列に 15px のパディングが追加されました。このパディングは、列が実際に行の端に接していることを意味します。行には負の余白があり、コンテナーには正の余白があるため、それ自体がコンテナーの端に接しています。ただし、列のパディングは、列内のすべてのものを必要な場所に押し込み、列間に 30px のガターも提供します。行の外で列を使用しないでください。機能しません。

詳細については、この記事を読むことをお勧めします。Bootstrap のグリッド システムがどのように機能するかをよく説明しています。

于 2016-10-10T14:54:33.060 に答える
1

クラス「コンテナ」は、コンテンツをビューポートの中心にラップします。in body タグを付けたコンテンツ全体を、ページ中央に指定幅で表示される結果ページに配置することができます。

クラス 'row' は、コンテンツを列に並べて配置する必要がある場合に使用されます。各行には合計で最大 12 列を含めることができます。

于 2013-11-14T17:22:06.567 に答える
0

従来の CSS プラクティスでは、おそらく次のクラスを使用します。

wrapper, header, navigator, contents, footer

上記のクラスの使用法は、次の例のようになります。

<body>
    <div class="wrapper">
        <div class="header">

        </div>
        <div class="navigator">

        </div>
        <div class="content">

        </div>
        <div class="footer">

        </div>
    </div>

</body>

ブートストラップでは、必要に応じて、または上記のテンプレートに慣れている場合は、次の例のようなブートストラップ クラスを使用できます。

<body>

    <div class="container">
        <div class="col-md-12">
            <h1>Header</h1>
            <p>Header contents goes here</p>
        </div>
        <div class="col-md-12">
            <nav role="navigation" class="nav navbar">
                <h1>Navigation</h1>
                <p>Navigation contents goes here</p>
            </nav>
        </div>
        <div class="col-md-12">
            <div class="pagination">
                <h1>Page contents</h1>
                <p>Webpage contents goes here</p>
            </div>

        </div>
        <div class="col-lg-12">
            <h1>Footer contents</h1>
            <p>footer contents goes here</p>
        </div>
    </div>

</body>

行クラスの場合、ページの表形式のレイアウトを設計する場合は行クラスを使用できますが、テーブル形式でデータを表示する場合はテーブル クラスを使用する必要がありますが、テーブルはレスポンシブではありません。

データ テーブルとは異なる表形式のレイアウトを作成するには、次の例のように行クラスを使用します。

<body>

<div class="container">
    <div class="row">
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
  </div>
</div>

</body>

テーブルベースのレイアウトの使用を避け、ここで説明されているようなレスポンシブ テーブルの使用を試みる必要があります。

于 2015-07-08T22:41:56.537 に答える