Layout проблема, падение колонки вниз

Question

Im совершенно новой для Twitter Bootstrap, я пытаюсь сделать макет 2 колонки
Вот мой код:

<div class="container"> 
    <div class="row"> 
     <div class="span3 well">Content</div> 
     <div class="span9 well">Content</div> 
    </div> 
<div> 

К сожалению, второй столбец был толчок к нижней части колонны 1

Jsfiddle

Создание контейнера столбца row-fluid кажется, чтобы исправить эту проблему, но в соответствии с начальной загрузки инструкции, и нужно в Div контейнер, имеющий класс container-fluid

Я хочу сделать исправление, поэтому я не хочу, чтобы контейнер работал как контейнер для жидкости.
Есть ли способ исправить это?

Answer 1

Если вы используете строку, вам необходимо разместить лунки внутри диапазонов span3 и span9.

<div class="container"> 
    <div class="row"> 
     <div class="span3"> 
      <div class="well">Content</div> 
     </div> 
     <div class="span9"> 
      <div class="well">Content</div> 
     </div> 
    </div> 
<div> 

Поскольку они имеют фиксированную ширину при использовании в нормальном ряде, добавление каких-либо отступов или границы к пролетной диве будет причина их обернуть.

В качестве альтернативы вы можете исправить само загрузочный css, либо принимая во внимание границы и соответственно уменьшая маржу, либо изменяя свойство размера коробки, согласно Twitter Bootstrap - borders. Имейте в виду, что размер окна не работает с некоторыми браузерами, например. IE7.

Answer 2

В Twitter Bootstrap, .well класс имеет дополнение, и это дает дополнительную ширину для содержимого классов span.

Решение:

.well { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;  
} 

http://jsfiddle.net/uAs6k/305/