Бутстрап-колонны, перекрывающиеся по расположению жидкости

Question

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

Неудачный jfiddle можно найти здесь. http://jsfiddle.net/rB9Md/

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span4"> 
      <div style="border:1px solid black; min-width:400px; width:400px"> 
       span4 
      </div> 
     </div> 
     <div class="span4"> 
      <div style="border:1px solid red; min-width:400px; width: 400px"> 
       span4 
      </div> 
     </div> 
     <div class="span4"> 
      <div style="border:1px solid green; min-width:400px; width: 400px"> 
       span4 
      </div> 
     </div> 
    </div> 
</div> 

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

Answer 1

http://jsfiddle.net/ZRpSZ/1/

Вы не хотите использовать min-width, width стили в этом случае, если вы можете избежать этого.

Bootstrap's span4 уже собирается сделать эту ширину столбца 33% (4/12) ширины экрана или свернуть, если ширина экрана слишком мала. При использовании бутстрапа вы хотите использовать систему сетки для размещения столбцов столько, сколько сможете. Для справки см. this.

Если вам нужны столбцы шириной 400 пикселей, вы не сможете получить их бок о бок в большинстве экранов. Поэтому вам следует подумать о том, насколько вы готовы реагировать.

Система сетки бутстрапа по умолчанию использует 12 столбцов, что делает возможным использование контейнера размером 940px без возможности реагирования. С добавленным файлами CSS сетка адаптируется к размерам 724px и 1170px в широком диапазоне в зависимости от вашего окна просмотра. Ниже видовых экранов 767px столбцы становятся жидкостью и стек вертикально.

Когда столбцы стека, вы можете установить max-width:400px, чтобы они оставались только такими широкими.