Яка різниця між col-lg- *, col-md- * та col-sm- * у Bootstrap?

У чому різниця між col-lg-*, col-md-*і col-sm-*в Twitter Bootstrap?

Оновлено 2019 рік ...

Bootstrap 3 Сітка поставляється в 4 -х рівнях (або «точки зупину») ...

• Невеликий (для смартфонів .col-xs-*)
• Маленький (для планшетів .col-sm-*)
• Середній (для ноутбуків .col-md-*)
• Великий (для ноутбуків / настільних ПК .col-lg-*).

Ці розміри сітки дозволяють контролювати поведінку сітки на різній ширині. Різні яруси контролюються за допомогою медіа-запитів CSS .

Так у сітці з 12 стовпцями Bootstrap ...

col-sm-3становить 3 з 12 колонок шириною (25%) на типово невеликій ширині пристрою (> 768 пікселів)

col-md-3становить 3 з 12 колонок шириною (25%) на типовій середній ширині пристрою (> 992 пікселів)

Менший рівень ( xs, smабо md) також визначає розмір для більшої ширини екрану . Отже, для стовпчика однакового розміру на всіх ярусах просто встановіть ширину для найменшого огляду…

<div class="col-lg-3 col-md-3 col-sm-3">..</div> те саме, що,

<div class="col-sm-3">..</div>

Маються на увазі більші яруси . Тому що col-sm-3означає 3 units on sm-and-up, якщо спеціально не буде відмінено більший рівень, який використовує інший розмір.

xs(за замовчуванням)> переопределено sm> Переопределено по md> Переопределено поlg

Комбінуйте класи, щоб використовувати зміни ширини стовпців для різних розмірів сітки . Це створює чуйний макет.

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

В sm, mdі lgсітки буде все «стек» вертикально на екранах / видових менш ніж 768 пікселів. Тут розміщується xsсітка. Стовпці, які використовують col-xs-*класи, не складатимуться вертикально, і продовжують масштабувати на найменших екранах.

Змініть розмір веб-переглядача, використовуючи цю демонстрацію, і ви побачите ефекти масштабування сітки.

Завантаження 4

У Bootstrap 4 з'явився новий -xl-розмір, дивіться цю демонстрацію . Також -xs-виправлення було видалено , тому найменші стовпці просто col-1, col-2.. col-12, тощо.

col-*- 0 (xs)
col-sm-*- 576px
col-md-*- 768px
col-lg-*- 992px
col-xl-*- 1200px

Демонстраційна сітка для завантаження 4

Крім того, Bootstrap 4 включає нові стовпці з автоматичним компонуванням . Вони також мають адаптивні контрольні точки ( col, col-sm, col-mdі т.д ..), але не мають певні% ширини. Тому стовпці з автоматичним компонуванням заповнюють рівну ширину по всьому рядку.

Ця стаття пояснює більше про сітку Bootstrap

Бутстрапа документи роблять це пояснити, але вона до цих пір мені потрібно якийсь час , щоб отримати його. Це має більше сенсу, коли я пояснюю це одним із двох способів:

Якщо ви думаєте, як стовпці починаються горизонтально, то ви можете вибрати, коли ви хочете, щоб вони складалися .

Наприклад, якщо ви починаєте зі стовпців: ABC

Ви вирішуєте, коли вони повинні складатись таким чином:

А

Б

С

Якщо ви вибрали col-lg, то стовпці будуть складатись, коли ширина <1200px.

Якщо ви вибрали col-md, то стовпці будуть складатись, коли ширина <992px.

Якщо ви вибрали col-sm, то стовпці будуть складатись, коли ширина <768px.

Якщо ви вибрали col-xs, стовпці ніколи не будуть складатись.

З іншого боку, якщо ви думаєте, як стовпці починаються складеними, ви можете вибрати, в який момент вони стануть горизонтальними :

Якщо ви вибрали col-sm, то стовпці стануть горизонтальними, коли ширина> = 768px.

Якщо ви вибрали col-md, то стовпці стануть горизонтальними, коли ширина буде> = 992px.

Якщо ви вибрали col-lg, то стовпці стануть горизонтальними, коли ширина> = 1200px.

З документації Twitter Bootstrap :

• невелика сітка (≥ 768px) = .col-sm-*,
• середня сітка (≥ 992 пікселів) = .col-md-*,
• велика сітка (≥ 1200px) = .col-lg-*.

Я думаю, що заплутаним аспектом цього є той факт, що BootStrap 3 - це перша мобільна система, що реагує на перше місце, і не в змозі пояснити, як це впливає на ієрархію col-xx-n у тій частині документації Bootstrap. Це змушує задуматися про те, що відбувається на менших пристроях, якщо ви виберете значення для більших пристроїв, і змушує задуматися, чи потрібно вказати кілька значень. (Ви цього не робите)

Я б спробував уточнити це, заявивши, що ... Низькі типи зерна (xs, sm) намагаються зберегти вигляд макета на менших екранах, а більші типи (md, lg) відображатимуться правильно лише на більших екранах, але будуть обертати стовпці на менших пристроях. Значення, наведені в попередніх прикладах, посилаються на поріг, при якому завантажувальний пристрій погіршує зовнішній вигляд, щоб відповідати наявній властивості екрана.

Це означає на практиці, що якщо ви робите стовпчики col-xs-n, вони зберігатимуть правильний вигляд навіть на дуже маленьких екранах, поки вікно не зменшиться до такого настільки обмежуючого розміру, що сторінка не може бути відображена належним чином. Це має означати, що пристрої, що мають ширину 768 пікселів або менше, повинні показувати вашу таблицю, як ви її проектували, а не в деградованій формі (одинарна або загорнута колонка). Очевидно, це все ще залежить від вмісту стовпців і в цьому вся суть. Якщо сторінка намагається відобразити кілька стовпців великих даних, поруч на маленькому екрані, то стовпчики, природно, перегортаються жахливим чином, якщо ви цього не зробили. Тому, залежно від даних у стовпцях, ви можете визначити, в якій точці буде розміщено макет для адекватного відображення вмісту.

Наприклад, якщо на вашій сторінці є три стовпчики col-sm-n, завантажувальний стовпчик загорне стовпці в рядки, коли ширина сторінки опуститься нижче 992px. Це означає, що дані все ще є видимими, але для її перегляду потрібна вертикальна прокрутка. Якщо ви не хочете, щоб ваш макет погіршився, виберіть xs (доки ваші дані можуть бути адекватно відображені на пристрої нижчої роздільної здатності у трьох стовпцях)

Якщо горизонтальне положення даних є важливим, тоді слід спробувати вибрати більш низькі значення зернистості для збереження візуального характеру. Якщо позиція менш важлива, але сторінка повинна бути видимою на всіх пристроях, тоді слід використовувати більш високе значення.

Якщо ви вибрали col-lg-n, то стовпці відображатимуться правильно, поки ширина екрана не опуститься нижче порогу xs 1200px.

Розміри пристрою та префікс класу:

• Додаткові невеликі пристрої Телефони (<768px) - .col-xs-
• Невеликі пристрої Планшети (≥768px) - .col-sm-
• Середні пристрої Настільні ПК (≥992 пікселів) - .col-md-
• Великі настільні пристрої (≥1200px) - .col-lg-

Параметри сітки:

Довідка: Сітка система

TL; DR

.col-X-Yкошти на екрані розміром X і вгору , розтягнути цей елемент , щоб заповнити стовпці Y .

Bootstrap забезпечує сітку з 12 стовпців на кожен .row, тому Y = 3 означає ширину = 25%.

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

Сенс вказувати різну ширину для різних розмірів екрана полягає в тому, щоб ви могли збільшити розмір на менших екранах.

Приклад

<div class="col-lg-6 col-xs-12">

Значення: ширина 50% на комп’ютерах, 100% ширина на мобільних, планшетних та ноутбуках.

.col-xs-$   Extra Small     Phones Less than 768px 
.col-sm-$   Small Devices   Tablets 768px and Up 
.col-md-$   Medium Devices  Desktops 992px and Up 
.col-lg-$   Large Devices   Large Desktops 1200px and Up 

Один конкретний випадок: Перш ніж вивчити систему сітки завантажувальної системи, переконайтеся, що масштаб браузера встановлений на 100% (сто відсотків). Наприклад: Якщо роздільна здатність екрана (1600px x 900px) і масштаб браузера 175%, то елементи "bootstrap-ped" будуть укладені.

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">class="col-lg-4"</div>
        <div class="col-lg-4">class="col-lg-4"</div>
    </div>
</div>

100% масштабування Chrome

100-відсотковий браузер - елементи розміщені горизонтально

Збільшити хром 175%

175 відсотків браузера - складені елементи

Давайте скасуємо Bootstrap!

Зверніть увагу, як колона займає 100% ширину (інакше кажучи, переходить на новий рядок) внизу, 576pxале колонка не відповідає. Ви можете помітити поточну ширину в верхньому центрі в gif.

Ось код:

<div class="container">
    <div class="row">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
    </div>
    <div class="row">
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
    </div>
</div>

За замовчуванням Bootstrap вирівнює всі стовпці (col) в одному рядку з однаковою шириною. У цьому випадку три colбудуть займати 100% / 3 ширини кожна, незалежно від розміру екрана. Ви можете це помітити в gif.

Що робити, якщо ми хочемо відображати лише один стовпець у рядку, тобто давати 100% ширини кожному стовпцю, але лише для менших екранів ? Тепер приходять col-xxзаняття!

Я використовував, col-smтому що хотів розбити стовпчики на окремі рядки нижче 576 пікселів. Ці 4 col-xxкласи надаються Bootstrap для різних пристроїв дисплея, таких як мобільні телефони, планшети, ноутбуки, великі монітори тощо.

Отже, col-smвирветься нижче 576px, col-mdзламається нижче 768px, col-lgзламається нижче 992px і col-xlзламається нижче 1200px

Зауважте, що col-xsу завантажувальній програмі 4 немає класу.

Це в значній мірі підсумовує. Можна повернутися до роботи.

Але в цьому є трохи більше. Тепер приходить col-*і col-xx-*для налаштування ширини.

Пам'ятайте, у вищенаведеному прикладі я згадував, що colабо col-xxзаймає рівну ширину підряд. Тож якщо ми хочемо надати певній ширині певному, colми можемо це зробити.

Рядок завантажувача розділений на 12 частин, тому у наведеному вище прикладі їх було 3, colтому кожна займає 12/3 = 4 частини. Ви можете розглядати ці частини як спосіб вимірювання ширини.

Ми могли б також написати , що в форматі , col-*тобто , col-4як це:

<div class="row">
  <div class="col-4">col</div>
  <div class="col-4">col</div>
  <div class="col-4">col</div>
</div>

І це не мало би значення, оскільки завантажувальний засіб за замовчуванням дає рівну ширину col(4 + 4 + 4 = 12).

Але що робити, якщо ми хочемо дати 7 частинам 1-й col, 3 частинам 2-й colі 2-й частинам (12-7-3 = 2) 3-й col(7 + 3 + 2, тож 12), ми можемо просто зробити це:

<div class="row">
  <div class="col-7">col-7</div>
  <div class="col-3">col-3</div>
  <div class="col-2">col-2</div>
</div>

і ви також можете налаштувати ширину col-xx-*класів.

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

Як це виглядає в дії?

Що робити, якщо сума colбільше 12? Тоді colволя зміститься / налаштується на лінію нижче. Так, для рядка може бути будь-яка кількість стовпців!

<div class="row">
        <div class="col-12">col-12</div>
        <div class="col-9">col-9</div>
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
    </div>

Що робити, якщо нам потрібно 3 стовпчики підряд для великих екранів, але розділити ці стовпці на 2 ряди для маленьких екранів?

<div class="row">
    <div class="col-12 col-sm">col-12 col-sm TOP</div>
    <div class="col col-sm">col col-sm</div>
    <div class="col col-sm">col col-sm</div>
</div>

Ви можете пограти тут: https://jsfiddle.net/JerryGoyal/6vqno0Lm/

Я думаю, що цей образ досить гарний, щоб краще зрозуміти концепцію!

Для більш детального розуміння перейдіть за посиланням нижче:

https://getbootstrap.com/docs/3.4/css/

добре, це використовується, щоб повідомити завантажувальному пристрою, скільки стовпців потрібно розмістити в ряд залежно від розміру екрана,

col-xs-2

показав би лише 2 стовпці поспіль на додатково малому (xs) екрані, так само, як sm визначає маленький екран, md (середній розмір), lg (великий розмір), але відповідно до початкового правила меншим першим правилом, якщо згадати

xs-col-2 md-col-4

тоді в кожному рядку будуть показані 2 стовпці для розмірів екрана від xs upto sm (включені) та зміни, коли він набере наступного розміру, тобто для md до lg (включено) для кращого розуміння розмірів екрана, спробуйте запустити їх у різних режимах екрана в Режим розробника chrome (ctr + shift + i) та спробуйте різні пікселі чи пристрої