Розуміння класів сітки (col-sm- # та col-lg- #) у Bootstrap 3

Я починаю роботу з Bootstrap 3, і у мене виникають проблеми з розумінням того, як класи сітки призначені для використання.

Ось що я зрозумів до цього часу:

Здається, класи col-sm-#та col-lg-#відрізняються від звичайних старих col-#тим, що застосовуватимуться лише тоді, коли екрани перевищують певний розмір (768px та 992px відповідно). Якщо ви пропустите -sm- або -lg-, divs ніколи не згорнуться в один стовпець.

Тим НЕ менше, коли я створюю дві діви всередині поспіль , що обидва col-sm-6, здається , вони тільки пліч-о-пліч , коли вікно знаходиться між 768px і 992px в ширину. Іншими словами, якщо я стиснути вікно весь шлях вниз і потім повільно розширити його, розкладка один стовпець, а потім два стовпці, а потім назад в одну колонку знову .

1. Це передбачувана поведінка?
2. Якщо мені потрібні два стовпці для будь-чого більше 768px, чи слід застосовувати обидва класи? ( <div class="col-sm-6 col-lg-6">)
3. Слід col-6 також включити?<div class="col-6 col-sm-6 col-lg-6">

[ОНОВИТИ ВНИЗ]

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

Відповіді на мої запитання:

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

2. Так, класи мають бути об’єднаними.

3. Здається, це доречно в певних випадках, але не в інших, оскільки класи col-# в основному еквівалентні col-xsm- # або, ширини вище 0px (усі ширини).

Окрім прочитання документів занадто швидко, я думаю, що я був розгублений, бо потрапив у Bootstrap 3 з "ментальністю Bootstrap 2". Зокрема, я використовував (необов’язково) адаптивні стилі (bootstrap-responsive.css) у версіях v2 та v3, які зовсім інші (для кращого IMO).

ОНОВЛЕННЯ для стабільного випуску:

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

Станом на момент, коли я зараз пишу це, col-*-#класи, здається, застосовуються вгору. Так, наприклад, якщо ви хочете, щоб елемент мав 12 стовпців (повна ширина) для телефонів, але два 6 стовпця (половина сторінки) для планшетів і вище, ви зробите щось подібне:

<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6

(Вони також додали додаткову точку розриву xs після написання цього запитання.)

Тут у вас є дуже хороший підручник, який пояснює, як використовувати нові класи сітки в Bootstrap 3.

Він також охоплює міксини тощо.

"Якщо я хочу два стовпці для будь-чого більше 768px, чи слід застосовувати обидва класи?"

Це має бути так просто, як:

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

Не потрібно додавати col-lg-6 теж.

Демо: http://www.bootply.com/73119

Найкращий спосіб зрозуміти - це просто думати зверху вниз (великі робочі столи на мобільні телефони)

По-перше, оскільки B3 передусім мобільний, тож, якщо ви використовуєте xs, тоді стовпці будуть однаковими від великих робочих столів до xs (я рекомендую використовувати xs або sm, оскільки це збереже все так, як ви хочете на кожному розмірі екрана)

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

вищезазначене змінить ширину відповідно до роздільної здатності екрану, ПАМ’ЯТАЙТЕ, що я зберігаю загальну кількість стовпців у кожному класі = 12

Сподіваюсь, моя відповідь допоможе!

Для того, щоб змінити відповідь SDP в вище, вам не потрібно оголошувати col-xs-12в <div class="col-xs-12 col-sm-6">. Bootstrap 3 призначений для мобільних пристроїв, тому кожен стовпець div за замовчуванням вважається div із шириною 100% - це означає, що при розмірі "xs" він становить 100% ширини, він завжди буде за замовчуванням для такої поведінки, незалежно від того, що ви встановили в sm, md, lg. Якщо ви хочете, щоб ваші xsстовпці були не на 100%, тоді ви зазвичай робите a col-xs-(1-11).

Це може запізнитися, оскільки, я думаю, більшість з нас використовують BS4. У цій статті детально і просто описано всі запитання, які ви задавали, а також зазначено, що робити коли. Детальний посібник із використання bs4 абоbootstrap

https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7