Застосовується лише для Bootstrap 3.
Ігноруючи букви (x s , sm , md , lg ) наразі , я розпочну з просто цифр ...
- числа (1-12) являють собою частину загальної ширини будь-якого дільника
- всі діви розділені на 12 стовпців
- таким чином,
col-*-6охоплює 6 з 12 стовпців (половина ширини), col-*-1212 12 стовпців (по всій ширині) тощо
Отже, якщо ви хочете, щоб два рівних стовпчики містили діл, пишіть
<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, оскільки ваші кривдні діви будуть стикатися до наступного ряду (ні .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>
Кожен набір вкладених дівок також охоплює до 12 стовпців свого батьківського діла. ПРИМІТКА. Оскільки в кожному .colкласі є розміщення 15 пікселів з обох боків, зазвичай слід загортати вкладені стовпці в .row, які мають -15px поля. Це дозволяє уникнути дублювання прокладки і зберігає вміст, розташований між вкладеними та не вкладеними класами col.
- Ви спеціально не питали про xs, sm, md, lgвикористання, але вони йдуть рука об руку, тому я не можу не торкнутися цього ...
Коротше кажучи, вони використовуються для визначення розміру екрана, який повинен застосовувати цей клас:
- xs = додаткові маленькі екрани (мобільні телефони)
- sm = маленькі екрани (планшети)
- md = середні екрани (деякі настільні)
- lg = великі екрани (решта робочих столів)
Прочитайте розділ " Параметри сітки "
з офіційної документації на завантаження для отримання більш детальної інформації.
Зазвичай слід класифікувати div за допомогою декількох класів стовпців, щоб він поводився по-різному, залежно від розміру екрана (саме в цьому полягає реакція на завантажувальну систему). наприклад: діва з класами col-xs-6і col-sm-4буде охоплювати половину екрана на мобільному телефоні (xs) та 1/3 екрана на планшетах (sm).
<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 кол, якщо ви знаєте, як вони будуть реагувати. - Це спірне питання, і не всі згодні.
