ブートストラップの.rowクラスのデフォルトマージンが-30pxのままになっているのはなぜですか？

Question

私はあなたが私のテスト設計を見てみると...

をクラス「行」を使用する必要がブートストラップを実行します。私はのマージン左に強制していますなぜ

を - 30px？このHTMLで

Iは、各列に全体使用可能な幅の33％を共有する3行期待：ボタンと

<div class="container"> 
    <div class="row"> 
     <div style="background-color: pink;" class="span4"> 
      This is a label 
     </div> 
     <div style="background-color: violet;" class="span4"> 
      This is a textbox 
     </div> 
     <div style="background-color: slateblue;" class="span4"> 
      This is a button 
     </div> 
    </div> 

    <div class="row"> 
     <div style="background-color: orange;" class="span4"> 
      This is a label 
     </div> 
     <div style="background-color: orangered;" class="span4"> 
      This is a textbox 
     </div> 
     <div style="background-color: yellow;" class="span4"> 
      This is a button 
     </div> 
    </div> 

    <div class="row"> 
     <div style="background-color: seagreen;" class="span4"> 
      This is a label 
     </div> 
     <div style="background-color: green;" class="span4"> 
      This is a textbox 
     </div> 
     <div style="background-color: lightgreen;" class="span4"> 
      This is a button 
     </div> 
    </div>  

</div> 

灰色の領域は、このコードからのものである：

<div style="background-color: gray;"> 
    <div class="pager"> 
     <div class="pull-left"> 
      <a href="#" class="btn" data-bind="css: { disabled: !hasPrevious() }, click: previous">previous</a> 
      <a href="#" class="btn" data-bind="css: { disabled: !hasNext() },  click: next">next</a> 
     </div> 
     <div class="pull-right"> 
      <span data-bind="text: stepNumber()" /> 
      <span>/</span> 
      <span data-bind="text: stepsLength" /> 
     </div> 
    </div> 
    <hr /> 

    <!-- ko compose: { model: activeStep, 
     transition: 'entrance' } --> 
    <!-- /ko --> 
</div> 

1. -30px margin-leftを削除すると、3列のデザイン全体が一緒に落ちるのはなぜですか？

2. コードを変更して、実際に同じ幅の各列を3列のレイアウトにするにはどうすればよいですか。これがspan4がすべきことです。

Answer 1

質問1：

spanのすべてが単一のブロックの間にいくつかのスペースを作成するために、30pxのmargin-leftを持っています。このスペースは、とととの間にのみと表示され、rowの先頭には（または最後）と表示されません。これを達成するために、いくつかのpossibilitysある - 例えば：

• マージン左上を除去する:first-childセレクタを使用
• （これはブートストラップが何である）空間と行の負marginを作成行のspan最初
• [継続する]

私はそれが古いBとより互換性のためのブートストラップは、最初のオプションを使用すると仮定することができますローラー（おそらくIE 7以下）。

少しの例：spanの幅が100、スペースが10、行が3つあるとします。単一スパンの幅を有する

• この場合、あなたの総行幅がなければならない320（100 + 10 + 100 + 10 + 100 = 320）110（100幅+ 10 magin左）
  • 単にそれらを合算することは、あなたに
  • は、10を "引く" 330の幅と始まり（10 + 100 + 10 + 100 + 10 + 100 = 330）で10の醜いスペースを与えるだろうリストされた方法の1つ（-10 + 10 + 100 + 10 + 100 + 10 + 100 = 320）
    • 万歳、私たちは数学の力

質問2 あなたがspan4 Sを使用している場合、あなたはすでにの3列を持っていると偉大なことを作成しました同じ幅。何も変更する必要はありません。あなたが必要としないので.offsetFirstChild（@columns）

（ブートストラップのmixin.lessを参照）

Answer 2

は、ミックスインは非常に便利ですもはや列流体を使用することができない。すべての行はcleafixを実行し、負のマージンを適用します。これは通常、正確なグリッドシステムに適しています。コンテナを使用するか、 "行"を使用する代わりに "clearfix"を使用することができます。以前とまったく同じ動作をします。

Answer 3

：あなたは流体モードとあまり使用している場合は

Answer 4

クラスrowはBootply

1. clearfix
2. 負margin-left
3. 負margin-right

を追加します。http://www.bootply.com/120858

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

先頭に負のマージンなし：：

<div>  
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4">.col-md-4</div> 
</div> 

Answer 5

利用のjQuery：

$('<div>Test</div>').addClass('row').css("margin-left", 0).css("margin-right", 0).appendTo('.content');