Как работает Bootstrap Grid?

Question

Я пытаюсь понять, как это работает.

Я сделал столбцы и положил <hr> внутри только для иллюстрации.

Вот что я пытался до сих пор:

Маржа ряд слева и справа -15px. Столбцы вставки слева и справа 15px.

Ширина, то же самое, что и в бутстрапе.

Столбцы плавают влево.

Я не понимаю, почему мой не работает? Например, у 4 столбцов будет только 3 столбца, а второй - на дно. Ширины правильные. Я немного расстроен.

Edit:

HTML

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

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

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

CSS

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

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

Answer 1

Yours не работает, как Bootstrap, потому что Bootstrap использует border-box проклейки. Для того, чтобы ваша работа то же использование ..

* { 
    -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: col-md-12 один столбец

, так что если вы хотите, 2 колонки вы делаете col-md-6 (дважды, и всегда bewteen класса строки)

и он работает так же со всем остальным

попробуйте прочитать это: http://getbootstrap.com/css/#grid