Блокировка, остающаяся в строке, независимо от размера экрана

Question

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

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

Вот мой код (или вы можете пойти в bootply)

<div class="row" style="height:150px"> 
     <div class="col-xs-1 bggrey" style="height:100%"></div> 
     <div class="col-xs-6 bgblue" style="height:100%"></div> 
     <div class="col-xs-2 bgred" style="height:100%"></div> 
     <div class="col-xs-3 bggreen" style="height:100%"></div> 
    </div> 

Что я ожидаю от моего кода (работает нормально, если окно не слишком узок)

Что я получу, если окно сужается

Answer 1

Я думаю, это проблема стандартных прокладок в div. Когда разрешение наименьшее, чем сумма всех прокладок, он сломался. В вашем коде есть 4 divs, с 30 пикселями отступов, и когда он настолько подходит, он сломан. Я ставлю Прокладки к нулевому значению, и она работает

Смотреть это: http://www.bootply.com/jaSQxxUZuD#

Единственное изменение в КСС

.row > div { padding: 0 } 

Если вам нужно сохранить theese Прокладки, вы можете предотвратить ломаную:

.row { white-space: nowrap; } 

EDIT

Если вам нужно сохранить эти отступы, это лучше сделать Внеш

.row > div { box-sizing: border-box; } 

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

Answer 2

col-xs-1 имеет padding-left и padding-right 15px, это означает, что размер серой полосы больше, чем 8,333% от ширины, когда ширина экрана ниже 330 пикселей.

Установите прописку на 0, чтобы избежать проблемы.

Answer 3

Существуют различные возможности для решения этой проблемы. Добавление этого в CSS должен, по крайней мере, сделать это:

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-6{ 
    padding:0px; 
}