Отключение столбцов Bootstrap от перечисления по вертикали

Question

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

В настоящее время у меня есть это:

<div class="row">
<div class="col-lg-6 col-lg-offset-3">
    <div class="col-lg-4 headerBlock">
        <i class="headericon blackicon img-responsive fa fa-code"></i>
        <br/>
        <kbd class="headingkbd">Heading 1</kbd>
    </div>
    <div class="col-lg-4 headerBlock">
        <i class="headericon blackicon img-responsive fa fa-laptop"></i>
        <br />
        <kbd class="headingkbd">Heading 2</kbd>
    </div>
    <div class="col-lg-4 headerBlock">
        <i class="headericon blackicon img-responsive fa fa-coffee"></i>
        <br />
        <kbd class="headingkbd">Heading 3</kbd>
    </div>
</div>

Как остановить автоматическую укладку столбцов, когда размер экрана достигает минимального размера, и вместо этого уменьшить их до размера экрана?

Answer 1

Вы можете указать ширину каждого элемента или указать ширину всех элементов.

Документация гласит, что вы должны обернуть row в container, затем непосредственно внутри div.row вы начинаете определять свои div. <div class="col-lg-6 col-lg-offset-3"> в этом нет необходимости, если только он не предназначен?

Итак, используя эти:

col-lg для больших экранов, следовательно (lg)

col-md для средних экранов, следовательно (md)

кол-см для малых / средних экранов, следовательно (см)

col-xs для очень маленьких экранов, следовательно (xs)

мы можем определить наш макет.

Теперь в вашем случае вы хотите, чтобы все три элемента всегда оставались посередине, вы можете просто указать col-xs-4 для всех них.

.headerBlock{
  text-align: center;/* to center the inline elements */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
	<div class="row">
	    <div class="col-xs-4 headerBlock">
	        <i class="headericon blackicon img-responsive fa fa-code"></i>
	        <br/>
	        <kbd class="headingkbd">Heading 1</kbd>
	    </div>

	    <div class="col-xs-4 headerBlock">
	        <i class="headericon blackicon img-responsive fa fa-laptop"></i>
	        <br />
	        <kbd class="headingkbd">Heading 2</kbd>
	    </div>

	    <div class="col-xs-4 headerBlock">
	        <i class="headericon blackicon img-responsive fa fa-coffee"></i>
	        <br />
	        <kbd class="headingkbd">Heading 3</kbd>
	    </div>
	</div>
</div>

или class="col-xs-4 col-sm-4 col-md-4 col-lg-4" Только здесь вы явно говорите.

Answer 2

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

Что-то вроде это :

<div class="row">
    <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
        <div class="col-xs-4 headerBlock">
            <i class="headericon blackicon img-responsive fa fa-code"></i>
            <br/>
            <kbd class="headingkbd">Heading 1</kbd>
        </div>
        <div class="col-xs-4 headerBlock">
            <i class="headericon blackicon img-responsive fa fa-laptop"></i>
            <br />
            <kbd class="headingkbd">Heading 2</kbd>
        </div>
        <div class="col-xs-4 headerBlock">
            <i class="headericon blackicon img-responsive fa fa-coffee"></i>
            <br />
            <kbd class="headingkbd">Heading 3</kbd>
        </div>
    </div>
</div>