web-dev-qa-db-ja.com

Bootstrapの「行」クラスの意味は何ですか？コンテナーとの違いは何ですか？それはどのようにcol-***-*とスタックしますか？

私はここでガイドに従っています http://getbootstrap.com/css/ そして、「行」クラスが何をしているのか理解できないようです。次のようなガイドの例をいくつか試しました。

<div class="row">
    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

行divを付けて、それを付けずに試してみました。すべてをコンテナー内に配置しようとしていましたが、まったく違いはなく、すべて同じように見えました。

「行」クラスの意味を誰かが説明できますか？

htmlcsstwitter-bootstraprow
7
anonymous

ブートストラップでは、「行」クラスは主に列を保持するために使用されます。 Bootstrapは、各行を12の仮想列のグリッドに分割します。次の例では、col-md-6 divの幅は、「行」のdivの6/12、つまり50％になります。 col-md-4は33.3％を保持し、col-md-2は残りの16.66％を保持します。

<div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-4"></div>
    <div class="col-md-2"></div>
</div>
13
Asaf David

行を、12に等しいX個の列を含むことができるコンテナーとして考えるのが好きです。行クラスを使用して、さまざまなスタック要素（列）を分離します。

Col-xs-12 col-md-8で定義した列は、中型の画面でdivの上にあるページの8/12に広がり、xsの小さな画面（モバイル）では12倍になることを意味します。列。 8 + 4 = 12であるため、これはcol-xs-12 col-md-4クラスで動作します。

サイト全体がこのように分割されている場合（8/12と4/12）、本当に必要なのは1行だけです。それ以外の場合は、列幅が異なる別の行を作成します。例は次のとおりです。

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-8"></div>
        <div class="col-xs-12 col-sm-4"></div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-4"></div>
        <div class="col-xs-12 col-sm-2"></div>
        <div class="col-xs-12 col-sm-6"></div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-3"></div>
        <div class="col-xs-12 col-sm-3"></div>
        <div class="col-xs-12 col-sm-3"></div>
        <div class="col-xs-12 col-sm-3"></div>
    </div>
</div>

コンテナークラスは、サイト全体の周りにニースマージンを作成するために使用されますが、サイトの一部が幅全体にまたがるようにする場合は、コンテナーを閉じて、コンテナー流体クラスを作成する必要があります。次に、別のコンテナを作成してマージンを取り戻します。それがすべてそれ以降になることを願っています！それについて私がどう思うか。

2
Benneb10

ここでは、行クラスで違いを確認できます。コンテナのような行は、要素に適用されるクラスです。

PS：スニペットを全画面で実行する

.color {
  background: #cfcfcf
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />

<div class='color container'>
  Container only
</div>

<p>
  <div class='color container-fluid'>
    <div class=row>
      Fluid Container & row

    </div>
  </div>
  <p>

    <div class='color container'>
      <div class=row>
        Container & Row

      </div>
    </div>
0
Lucky Chingi