0

私は自分のプロジェクトに取り組むために初めてブートストラップを使用しています。そして、container>row が正常に動作していることから、container>row>span12 が必要なのか、それとも単にベスト プラクティスなのかという疑問が生じます。

ありがとうございました

4

2 に答える 2

1

質問は紛らわしいです。

Bootstrap は、フローティング グリッド システムを使用して動作します。以下のソースを見ると、何が起こっているのかが明確になるはずです。この.containerクラスは、クラスと同様に 940px の幅を設定し.span12ます。この.rowクラスは、フローティング列の行を含むように clearfix が適用された div.spanです。すべての.spanXXクラスは左にフロートされ、グリッドを作成するために 20px の左余白が与えられます。

コンテナと行だけを使用している場合は、-20px の左余白を持つ幅 940px のコンテナを作成しているだけです。.span12フレームワークとの一貫性を保ち、マージンを正しく設定するには、引き続き使用する必要があります。これにより、列を利用したくないのに、そもそもなぜグリッド レイアウトを使用するのかという疑問が生じます。必要なのが 940px のコンテナーだけである場合は、作成するだけです。

bootstrap.css から:

.row {
  margin-left: -20px;
  *zoom: 1;
}

.row:before,
.row:after {
  display: table;
  line-height: 0;
  content: "";
}

.row:after {
  clear: both;
}

[class*="span"] {
  float: left;
  margin-left: 20px;
}

.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  width: 940px;
}

.span12 {
  width: 940px;
}
于 2013-05-22T10:35:04.830 に答える
0

ドキュメントを見てください。あなたの質問が正しいことを理解していれば、答えはこのリンクBootstrap documentationにあります。Fluid Nesting まで少し下にスクロールします。

また、スパン内で新しいコンテナーが作成されると、カウントが「0」から始まることに注意してください。

<div class="row-fluid">
  <div class="span12">
    Fluid 12
    <div class="row-fluid">
      <div class="span6">
        Fluid 6
        <div class="row-fluid">
          <div class="span6">Fluid 6</div>
          <div class="span6">Fluid 6</div>
        </div>
      </div>
      <div class="span6">Fluid 6</div>
    </div>
  </div>
</div>

このコード例では、メイン div であるスパン 12 があることがわかります。このスパンには 6 の 2 つのスパンがあります。これは理にかなっており、新しい行流体クラスを作成するたびにスパン カウントを「0」から開始するため、6 のスパンには 6 の 2 つのスパンもあります。

あなたの質問を正しく理解できたと思います!

Gr. リロイ

于 2013-05-22T07:02:46.177 に答える