Сетка Bootstrap 3, действительно ли * имеет значение, сколько столбцов в строке?

У меня есть макет формы, на котором есть загрузочные 3 группы форм. Я хочу, чтобы эти группы форм располагались в одном столбце на ‹маленьких, 2 столбцах на разрыве размера планшета и 4 столбцах на больших экранах.

У меня, по-видимому, он работает отлично, однако после некоторого чтения здесь то, что я сделал, похоже, нарушает предполагаемое правило, согласно которому каждый столбец в строке должен составлять до 12. Однако каждый учебник и документы, которые я мог найти, всегда используют ласковые слова, такие как «следует». или «в идеале», когда говорят, что в сумме должно быть 12. Здесь нет четких указаний.

Я определил свои группы так:

<div class="row">
    <div class="form-group col-md-6 col-lg-3" ><!--....etc-->

и в настоящее время у меня их по 4 в каждом ряду. Это означает, что 4 * col-lg-3 складывается до 12, а div групп формы 4 * col-md-6 складывается до 24, а не 12.

Однако это, похоже, не имеет значения и отлично работает в каждой точке останова.

Я должен быть обеспокоен? Имеет ли это какое-то значение? Конечно, я не должен делать два совершенно разных макета, которые дублируют все эти элементы управления по одному разу для col-md-6 и col-lg-3 на одной странице?


html css twitter-bootstrap twitter-bootstrap-3 grid-layout
person JohnC    schedule 06.05.2014    source источник

Ответы (3)


arrow_upward
40
arrow_downward

Нет, нет ничего, что требовало бы, чтобы сетка начальной загрузки должна составлять до 12 столбцы.
Это просто предпочтение / стилистика.

Менее 12 столбцов -> выравнивание по левому краю:

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

Следующий код:

<div class='row'>
    <div class="col-xs-2">Hi</div>
    <div class="col-xs-2">Hi</div>
</div>

.row > div {
    background: lightgrey;
    border: 1px solid grey;
}

Результаты в этом: (Демо в Fiddle)

скриншот

Более 12 столбцов -> Обертывания:

Если в сумме получается более 12 столбцов, пока столбцы находятся в классе row, они просто переносятся на дополнительные строки. Хорошим вариантом использования может быть система сетки фотографий, в которой вы хотите добавить тонны фотографий, но не знаете, сколько строк у вас будет, и все же хотите определить количество столбцов.

Следующий код:

<div class='row'>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
    <div class="col-xs-6">Hi</div>
</div>

Результат в этом: (Демо в Fiddle)

screenshot2

Помимо этого, иногда бывает, что макеты из 12 столбцов выглядят лучше, но вы не должны их использовать; это не судоку :)

person KyleMit    schedule 06.05.2014
comment
Спасибо за отличное объяснение. Многие ошибочно думают, что проблема заключается в наличии более 12 столбцов в строке. - person Zim; 21.06.2015

arrow_upward
0
arrow_downward

4 * col-md-6 создаст 2 "строки" на среднем экране. Поскольку вы оборачиваете все в .row, он будет работать, как ожидалось. Если вы удалите это, вещи будут располагаться рядом друг с другом.

e.g.

<div class="row">
  <div class="col-sm-2">Hello</div>
</div>
<div class="row">
  <div class="col-sm-2">Hello</div>
</div>

создаст 2 строки с 1 столбцом каждая, каждая из которых на 16,67% шириной, как родительская строка, и плавающая влево, потому что строка имеет ширину 100%. Ширина столбца указывается в столбце - ** - (число / 12) в процентах (2/12 = 0,166667).

<div class="col-sm-2">Hello</div>
<div class="col-sm-2">Hello</div>

создаст 1 строку с 2 столбцами, ширина каждого из которых соответствует ширине родительского объекта на 16,667%. Так что вы могли бы отказаться от .row, если бы вы сделали

<div class="col-sm-12 col-md-6 col-lg-3></div>
<div class="col-sm-12 col-md-6 col-lg-3></div>
<div class="col-sm-12 col-md-6 col-lg-3></div>
<div class="col-sm-12 col-md-6 col-lg-3></div>

Это создаст: Маленький экран (4 столбца с полной шириной строки) Средний экран (2 строки по 2 столбца каждая по 50% ширины) Большой экран (1 строка с 4 столбцами по 25% ширины)

person engineersmnky    schedule 06.05.2014
comment
Если блоки столбцов не одинаковой высоты, обертывание становится беспорядочным. - person trognanders; 11.07.2016
comment
@Bailey, мой ответ был больше направлен на правило из 12 вопросов, заявленных OP, и на то, как они работают. Не обязательно ответ на вопрос управления визуальным аспектом того, что определяет строку. - person engineersmnky; 14.07.2016

arrow_upward
-1
arrow_downward

В последнее время я видел много веб-сайтов, использующих "col-xs-12 col-md-10 col-md-offset-1". Смещение центрирует содержимое, но каждая строка заполнена всего 11 столбцами. Если следующим элементом является col-1, он также должен включать col-offset-1 (всего 13, перемещение col-1 со смещением-1 в следующую строку, хорошее выравнивание). Если следующий элемент шире, ему все равно нужно смещение (чтобы пропустить первый столбец).

Что касается CSS, все работает с процентами. Если общая ширина столбцов превышает 100%, следующий элемент должен быть помещен в новую строку. Вы можете легко поиграть с этой концепцией, создав html-файл с большим количеством div. Добавьте следующий css в div (основы начальной загрузки)

body > div {
    margin: 0;
    padding: 0;
    float: left;
    width: 8.333333% (or 1/12th)
}

Затем вы можете изменить размер отдельных div, чтобы посмотреть, что произойдет. Возможно, будет проще поиграть с круглыми значениями (например, 10% / 20%), просто придерживаясь здесь начальной загрузки. Надеюсь, это даст вам представление о том, как браузер обрабатывает сетку начальной загрузки (которую вы только что сделали базовой версией).

Документация Bootstrap по переносу столбцов также дает хороший пример.

person vandijkstef    schedule 13.08.2016