Значение чисел в «col-md-4», «col-xs-1», «col-lg-2» в Bootstrap

Игнорирование букв (xs, sm, md, lg) пока, я начну с цифр...

• числа (1-12) представляют часть общей ширины любого div
• все div разделены на 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, так как ваши оскорбительные divs будут удаляться до следующей строки (не .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 имеет 15px дополнение с обеих сторон, вы обычно должны обернуть вложенные столбцы в .row, который имеет поля -15px. Это позволяет избежать дублирования отступов и сохраняет содержимое, выровненное между вложенными и не вложенными классами col.

- Вы специально не спрашивали об использовании xs, sm, md, lg, но они идут рука об руку, поэтому я не могу не касаться этого...

Короче говоря, они используются для определения размера экрана, который должен применять класс:

• xs = дополнительные маленькие экраны (мобильные телефоны)
• sm = маленькие экраны (планшеты)
• md = средние экраны (некоторые настольные компьютеры)
• lg = большие экраны (остальные рабочие столы)

Обычно вы должны классифицировать 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 колонок, если вы знаете, как они будут реагировать. - Это спорная проблема, и не все согласны.