ブートストラップグリッドは実際にどのように機能しますか？

Question

私はそれがどのように動作するかを理解しようとしています。

私は列を作って、イラストのためだけに<hr>を入れました。

は、ここで私はこれまで試してみましたものです：

行マージンは左右-15px。 左右のパディング15px。

幅は、ブートストラップと同じです。

カラムを左にフローティングします。

なぜ私の仕事がうまくいかないのですか？たとえば、4つの列には3つの列しかなく、もう1つの列には下に行く列があります。幅は正しい。私は少し不満です。

編集：

HTML

<div class="row"> 
<div class="column"> 
    <hr> 
</div> 

<div class="column"> 
    <hr> 
</div> 

<div class="column"> 
    <hr> 
</div> 
</div> 

CSSブートストラップがborder-boxサイズを使用しているためユアーズブートストラップのように動作しません

.row { 
margin-left: -15px; 
margin-right: -15px: 
} 

.column { 
padding-left: 15px; 
padding-right: 15px; 
float:left; 
width: 33.33333% 
} 

Answer 1

。作るためにあなたは

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

.row { 
    margin-left: -15px; 
    margin-right: -15px: 
} 

.column { 
    padding-left: 15px; 
    padding-right: 15px; 
    float: left; 
    width: 33.33333% 
} 

http://www.codeply.com/go/BnMCZvKZ5N

Answer 2

ないあなたがacomplishしたいのか確認してください。..同じ使用を動作しますが、あなたは3つのcolumsをしたいように思えますか？

これを試してみてください：

<div class="row"> 
    <div class="col-md-4"> 
     1/3 
    </div> 
    <div class="col-md-4"> 
     2/3 
    </div> 
    <div class="col-md-4"> 
     3/3 
    </div> 
</div> 

リトルexplenation：あなたはあなたが2列にしたい場合 col-md-12はとても1列

あるcol-md-6（2回、そして常に行クラスbewteen）

と他のすべてと同じように動作します。

http://getbootstrap.com/css/#grid