web-dev-qa-db-ja.com

コンテンツが幅全体に及ぶ場合、Bootstrapの「コンテナ」と「行」を使用する必要がありますか？

Bootstrap 3 and4の標準は

<div class="container">
    <div class="row">
        <div class="col-md-4"> ... </div>
        <div class="col-md-8"> ... </div>   <!-- just add up to 12 -->
    </div>
</div>

しかし、div、table、form、またはその他の要素があり、それを幅全体に広げることを計画している場合はどうでしょうか。次に、ページ全体をBootstrap 3）のスタイリングルールの下で適切に表示するには、containerまたはrowまたはcol-md-12が必要ですか。と4？

P.S.可能であれば、これに関連する公式のBootstrapドキュメントを指すか、引用してください。

twitter-bootstraptwitter-bootstrap-3bootstrap-4twitter-bootstrap-4
7
nonopolarity

簡単な答え：あなたdocontainerを使用する必要がありますが、あなたdo n'trowを使用する必要があります。

要素はcontainerまたはcontainer-fluidに直接配置できます。 必須グリッド（.rowおよび.col-*）、およびコンテナ単独を使用する必要はありません。コンテンツのコンテナとして使用できます。応答性の高い12ユニット構造が必要な場合にのみグリッドを使用してください。

たとえば、これは有効なブートストラップです...

<div class="container">
   <h2>Hello World</h2>
   <p class="lead">Some other content...</p>
</div>

Bootstrap docs ..から.

「ブートストラップには、サイトのコンテンツをラップしてグリッドシステムを格納するための包含要素が必要です。」

したがって、containerの目的は2つあります。1）「グリッドシステムを収容する」ことと、2）「サイトのコンテンツをラップする」ことです。ただし、グリッド（.rowおよび.col-*）を使用する場合、コンテナーは.rowをラップするために必須です。

基本的なスターターテンプレート でさえ、グリッドなしでcontainerを利用します。

要約すれば...

  • .containerまたは.container-fluidを単独で使用して、要素とページコンテンツを含めることができます。
  • Ifグリッド（.rowおよび.col-*）を使用する場合、.rowは.containerまたは.container-fluid内にある必要があり、.col-*は.row内にある必要があります。
16
Zim

ラッピングdivに.container-fluidを追加する必要があります。テーブル、div、またはフォームをdiv内でラップし、クラス.container-fluidを追加する必要があります。

公式bootstrapグリッドシステムに関するドキュメント

4
neophyte

コンテンツをドキュメントの幅全体に広げる場合は、.container-fluidクラスを使用する必要があります。このクラスがないと、.rowの負のマージンにより水平スクロールが発生します。

container-fluidandrowを省略することもできますが、他のBootstrapコンポーネントを使用すると、予期しない結果が生じる可能性があります。

.col-md-4 {
  background: red;
}

.col-md-8 {
  background: green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4"> ... </div>
    <div class="col-md-8"> ... </div>
  </div>
</div>
1
Turnip

流体コンテナを使用して、親の幅全体に広がります。

0
DawgOnKing