Ответ 1
Относится только к Bootstrap 3.
Игнорируя буквы (xs, sm, md, lg) , пока, я начну только с цифр...
- числа (1-12) представляют часть общей ширины любого элемента
- все элементы делятся на 12 столбцов
- Итак,
col-*-6охватывает 6 из 12 столбцов (на половину ширины),col-*-12охватывает 12 из 12 столбцов (на всю ширину) и т.д.
Итак, если вы хотите, чтобы два одинаковых столбца занимали div, напишите
<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>
Или, если вы хотите, чтобы три неравных столбца имели одинаковую ширину, можно написать:
<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>
Вы заметите, что число столбцов всегда составляет до 12. Это может быть меньше двенадцати, но будьте осторожны, если больше 12, так как ваши оскорбительные div опустятся до следующей строки (не .row, что совсем другая история).
Вы также можете вкладывать столбцы в столбцы(лучше всего с оберткой .row), например:
<div class="col-xs-6">
<div class="row">
<div class="col-xs-4">Column 1-a</div>
<div class="col-xs-8">Column 1-b</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">Column 2-a</div>
<div class="col-xs-10">Column 2-b</div>
</div>
</div>
Каждый набор вложенных элементов div также занимает до 12 столбцов родительского элемента div. ПРИМЕЧАНИЕ: Поскольку каждый класс .col имеет заполнение по 15 пикселей с каждой стороны, обычно следует заключать вложенные столбцы в .row с полями -15px. Это позволяет избежать дублирования отступов и позволяет выровнять содержимое между вложенными и не вложенными классами col.
- Вы специально не спрашивали об использовании xs, sm, md, lg, но они идут рука об руку, поэтому я не могу не коснуться его...
Вкратце, они используются для определения размера экрана, который должен применяться этим классом:
- xs= очень маленькие экраны (мобильные телефоны)
- sm= маленькие экраны (планшеты)
- md= средние экраны (некоторые рабочие столы)
- lg= большие экраны (оставшиеся рабочие столы)
Прочитайте "сетку Options" глава из официальной документации Bootstrap для более подробной информации.
Обычно вы должны классифицировать div, используя несколько классов столбцов, чтобы он вел себя по-разному в зависимости от размера экрана (это и есть то, что делает загрузчик отзывчивым). например: div с классами col-xs-6 и col-sm-4 будет занимать половину экрана мобильного телефона (xs) и 1/3 экрана планшета (см).
<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->
ПРИМЕЧАНИЕ: согласно приведенному ниже комментарию, классы сетки для данного размера экрана применяются к этому размеру экрана и больше, если другое объявление не переопределяет его (т.е. col-xs-6 col-md-4 охватывает 6 столбцов в xs и sm, и 4 столбца в md и lg, хотя sm и lg никогда не были явно объявлены)
ПРИМЕЧАНИЕ: если вы не определите xs, по умолчанию будет установлено значение col-xs-12 (т.е. col-sm-6 составляет половину ширины на экранах sm, md и lg, но полноразмерное на xs экраны).
ПРИМЕЧАНИЕ: на самом деле вполне нормально, если ваш .row содержит более 12 столбцов, если вы знаете, как они будут реагировать. --This является спорным вопросом, и не все с этим согласны.
