Col sm 12: Блочная система · Bootstrap на русском

Я вижу что-то вроде следующего в примерах кода на StackOverflow и даже в темах для продажи (никогда в примерах Bootstrap). <div class=container> <div class=row> <div…

мой bootstrap col-xs работает с 768px-это нормально , я знаю, что xs работает с 480px ? <li class=col-xs-12 col-sm-6 col-md-4 col-lg-3> <p><img src=img/wdigets/1.jpg class=img-circle…

Я только что обнаружил Push/Pull с Bootstrap, я вижу, что вы можете переупорядочить столбцы для разных размеров экрана так:- <div class=col-md-4 col-sm-4 col-md-push-0…

Он должен складываться так, когда col-sm активируется: [ img ] [ content ] [ img ] [ content ] но вместо этого он складывается вот так: [ img ] [ content ] [ img ] [ content ] Я пытался удалить свои…

У меня есть стандартный цикл для фотогалереи, и я использую twitter-bootstrap col-xs-12 col-sm-6 col-md-4 col-lg-3 , который дает мне 4 изображения на рабочем столе, масштабируясь до одной…

Я видел этот вопрос: Boostrap 3-col-md-4 — col-sm-6, или сетка 3×2 — 2×3 Но у меня это не сработало. Это мой HTML: <link rel=stylesheet…

Мне нужно использовать bootstrap selectpicker, он выглядит хорошо, если у меня большой экран, но если я уменьшу размер экрана, мои выделения будут слоистыми, но я хочу показать их отдельно….

Я заметил, что мой сайт хорошо выглядит на рабочем столе, но на моем телефоне что-то было не так. Короче говоря, мой сайт имел вид <div class=row> <div class=col-sm-12> <!— content A…

Я пытаюсь использовать div с классом col-sm-6 и снова пытаюсь разделить его на 12 сеток, используя классы col-sm-6 и col-sm-6 . Однако, похоже, это не работает. col-sm-6 внутри col-sm-6 занимает всю…

Я использую bootstrap 4 и имею свои 4 столбца в 1 строке. Когда я перехожу на мобильный телефон, я хочу, чтобы 4 столбца стали 1 столбцом (по сути, добавьте строку на столбец.) Я понимал, что если я…

css — В чем разница между col-lg- *, col-md- * и col-sm- * в Bootstrap?

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

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

На практике это означает, что если вы сделаете столбцы col-xs-n, они будут сохранять правильный внешний вид даже на очень маленьких экранах, пока размер окна не станет настолько ограничительным, что страница не будет отображаться правильно. Это должно означать, что устройства, имеющие ширину 768 пикселей или меньше, должны отображать вашу таблицу в том виде, в каком вы ее создали, а не в ухудшенном виде (в виде одиночной или свернутой колонки). Очевидно, что это все еще зависит от содержимого столбцов, и в этом весь смысл. Если страница пытается отобразить несколько столбцов с большими данными рядом на небольшом экране, то столбцы естественным образом будут ужасно переноситься, если вы не учли их. Следовательно, в зависимости от данных в столбцах вы можете выбрать точку, в которой макет будет выделен для адекватного отображения содержимого.

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

Если горизонтальное положение данных важно, вам следует попытаться выбрать более низкие значения гранулярности, чтобы сохранить визуальный характер. Если позиция менее важна, но страница должна быть видна на всех устройствах, следует использовать более высокое значение.

Если вы выберете col-lg-n, столбцы будут отображаться правильно, пока ширина экрана не опустится ниже порога xs в 1200 пикселей.

Значение чисел в» col-md-4″,» col-xs-1″,» col-lg-2 » в Бутстрапе

игнорирование букв (xs, sm, md, lg) сейчас, я начну только с цифр…

• числа (1-12) представляют собой часть общей ширины любого div
• все divs разделены на 12 столбцов
• и col-*-6 пяди 6 из 12 столбцов (половина ширины),col-*-12 пяди 12 из 12 столбцов (вся ширина), и т. д.

Итак, если вы хотите две равные колонки чтобы охватить div, напишите

<div>Column 1</div>
<div>Column 2</div>

если вы хотите три неравные колонки чтобы охватить ту же ширину, вы можете написать:

<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>

вы заметите, что # столбцов всегда складывается до 12. Это может быть меньше двенадцати, но будьте осторожны, если больше 12, так как ваши оскорбительные дивы будут ударяться в следующий ряд (не .row, который совсем другая история).

вы также может вложить столбцы в столбцы, (С .row обертка вокруг них), такие как:

<div>
  <div>
    <div>Column 1-a</div>
    <div>Column 1-b</div>
  </div>
</div>
<div>
  <div>
    <div>Column 2-a</div>
    <div>Column 2-b</div>
  </div>
</div>

каждый набор вложенных divs также охватывает до 12 столбцов родительского div. Примечание: С каждого .col класс 15px обивка с обеих сторон, вы обычно должны обернуть вложенные столбцы в .row, который имеет -15px поля. Это позволяет избежать дублирования заполнения и сохраняет содержимое между вложенным и не вложенным col занятия.

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

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

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

читать «решетки Опции

В чем разница между col-lg- *, col-md- * и col-sm- * в Bootstrap?

В чем разница между col-lg-*, col-md-* и col-sm-* в Twitter Bootstrap?

ОТВЕТЫ

Ответ 1

Обновлено 2019…

Сетка Bootstrap 3 состоит из 4 уровней (или «точек останова»)…

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

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

Так в Bootstrap 12-колоночная сетка…

col-sm-3 имеет ширину 3 из 12 столбцов (25%) на типичном небольшом устройстве ширины (> 768 пикселей)

col-md-3 имеет ширину 3 из 12 столбцов (25%) на типичной средней ширине устройства (> 992 пикселя)

Меньший уровень (xs, sm или md) также определяет размер для большей ширины экрана. Таким образом, для столбца одинакового размера на всех уровнях просто установите ширину для наименьшего размера области просмотра…

<div>..</div> — это то же самое, что и

<div>..</div>

подразумевается более высокий уровень. Потому что col-sm-3 означает 3 units on sm-and-up, если только он не переопределен более крупным уровнем, который использует другой размер.

xs (по умолчанию)> переопределяется sm> переопределяется md> переопределяется lg

Объедините классы, чтобы использовать ширину столбцов изменения для разных размеров сетки. Это создает адаптивный макет.

<div>..</div>

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

Измените размер своего браузера , используя эту демонстрацию, и вы увидите эффекты масштабирования сетки.

Бутстрап 4

В Bootstrap 4 есть новый размер -xl-, см. это демо. Также был удален инфикс -xs-, поэтому самые маленькие столбцы — это просто col-1, col-2.. col-12 и т.д.

col-* — 0 (хс)
col-sm-* — 576 пикселей
col-md-* — 768 пикселей
col-lg-* — 992 пикселя
col-xl-* — 1200 пикселей

Bootstrap 4 Grid Демо

Кроме того, Bootstrap 4 включает в себя новые столбцы автоматической разметки. Они также имеют отзывчивые точки останова (col, col-sm, col-md и т.д.), Но не имеют определенной ширины%. Поэтому столбцы автоматического размещения заполняются равной шириной по всей строке.

Эта статья объясняет больше о сетке Bootstrap

Ответ 2

Загрузочный docs объясняет это, но мне все же понадобилось некоторое время, чтобы получить его. Это имеет смысл, когда я объясняю это себе одним из двух способов:

Если вы думаете о том, что столбцы начинаются горизонтально, вы можете выбрать, когда вы хотите, чтобы они стекали.

Например, если вы начинаете с столбцов: A B C

Вы решаете, когда они должны складываться так:

А

В

С

Если вы выберете col-lg, то столбцы будут стекаться, когда ширина равна < 1200px.

Если вы выберете col-md, тогда столбцы будут стекаться, когда ширина равна < 992px.

Если вы выберете col-sm, то столбцы будут стекаться, когда ширина равна < 768px.

Если вы выберете col-xs, столбцы никогда не будут стекаться.

С другой стороны, если вы думаете о столбцах, начинающихся с укладки, то вы можете выбрать, в какой точке они станут горизонтальными.:

Если вы выберете col-sm, то столбцы станут горизонтальными, если ширина равна = 768px.

Если вы выберете col-md, столбцы станут горизонтальными, если ширина равнa >= 992px.

Если вы выберете col-lg, столбцы станут горизонтальными, если ширинa >= 1200px.

Ответ 3

От Twitter Загрузочная документация:

• маленькая сетка (≥ 768px) = .col-sm-*,
• средняя сетка (≥ 992px) = .col-md-*,
• большая сетка (≥ 1200px) = .col-lg-*.

Ответ 4

Я думаю, что запутанный аспект этого заключается в том, что BootStrap 3 — это мобильная система с высокой чувствительностью и не может объяснить, как это влияет на иерархию col-xx-n в той части документации Bootstrap. Это заставляет вас задаться вопросом, что происходит на более мелких устройствах, если вы выберете значение для более крупных устройств и заинтересуетесь, нужно ли указывать несколько значений. (Вы этого не делаете)

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

На практике это означает, что если вы создадите столбцы col-xs-n, то они сохранят правильный внешний вид даже на очень маленьких экранах, пока окно не упадет до размера, который настолько ограничительный, что страница не может быть отображена правильно, Это должно означать, что устройства с шириной 768 пикселей или менее должны показывать вашу таблицу, как вы ее разрабатывали, а не в деградированной (одинарной или упакованной форме столбца). Очевидно, что это все еще зависит от содержания столбцов и от того, что весь смысл. Если страница пытается отобразить несколько столбцов больших данных, бок о бок на маленьком экране, то столбцы будут естественно обернуться ужасно, если вы не учтете это. Поэтому, в зависимости от данных в столбцах, вы можете определить точку, в которой макет будет использоваться для адекватного отображения контента.

например. Если ваша страница содержит три столбца столбцов col-sm-n, они будут помещать столбцы в строки, когда ширина страницы падает ниже 992 пикселей. Это означает, что данные все еще видны, но для просмотра требуется вертикальная прокрутка. Если вы не хотите, чтобы ваш макет деградировал, выберите xs (пока ваши данные могут быть адекватно отображены на устройстве с более низким разрешением в трех столбцах)

Если горизонтальное положение данных важно, вы должны попытаться выбрать более низкие значения гранулярности, чтобы сохранить визуальный характер. Если позиция менее важна, но страница должна быть видимой на всех устройствах, следует использовать более высокое значение.

Если вы выберете col-lg-n, столбцы будут отображаться правильно, пока ширина экрана не упадет ниже порога xs 1200px.

Ответ 5

Размеры устройства и префикс класса:

• Дополнительные мелкие устройства Телефоны (< 768px) — .col-xs-
• Маленькие устройства Таблетки (≥768px) — .col-sm-
• Средние устройства Настольные компьютеры (≥992px) — .col-md-
• Крупные устройства Настольные компьютеры (≥1200px) — .col-lg-

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

Ссылка: Grid System

Ответ 6

.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 

Ответ 7

TL; DR

.col-XY означает размер экрана X и выше, растяните этот элемент, чтобы заполнить Y столбцов.

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

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

Точка указания разной ширины на разных размерах экрана позволяет вам делать вещи более крупными на меньших экранах.

пример

<div>

Значение: ширина 50% на рабочих столах, ширина 100% на мобильных устройствах, планшетах и ноутбуках.

Ответ 8

Один конкретный случай: перед изучением системы сетки бутстрапов убедитесь, что значение масштабирования браузера установлено на 100% (на сто процентов). Например: Если разрешение экрана (1600 пикселей x 900 пикселей), а увеличение браузера составляет 175%, то элементы «bootstrap-ped» будут сложены.

HTML

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

Chrome zoom 100%

Браузер 100% — элементы, расположенные горизонтально

Chrome zoom 175%

Браузер 175% — сложенные элементы

Ответ 9

хорошо он использовал, чтобы сообщить загрузочное число, сколько столбцов должно быть размещено в строке в зависимости от экрана size-

col-xs-2

будет отображать только 2 столбца в строке на дополнительном маленьком экране (xs), так же, как sm определяет маленький экран, md (средний размер), lg (большой размер), но согласно первому правилу bootstrap меньше, если вы отметите

xs-col-2 md-col-4

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

Ответ 10

Ну, это Bootstrap Grid Divisions для отзывчивости устройств.

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

Если у вас есть какие-либо вопросы, дайте мне знать.

В чем разница между col-lg-*, col-md-* и col-sm-* в Bootstrap?

Я думаю, что запутанным аспектом этого является тот факт, что BootStrap 3 является мобильной первой отзывчивой системой и не может объяснить, как это влияет на иерархию col-xx-n в этой части документации по Bootstrap. Это заставляет вас задаться вопросом, что происходит на небольших устройствах, если вы выбираете значение для больших устройств, и заставляет вас задаться вопросом, Нужно ли указывать несколько значений. (Ты не знаешь)

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

на практике это означает, что если вы сделаете столбцы col-xs-n, то они сохранят правильный внешний вид даже на очень маленьких экранах, пока окно не упадет до размера, который таков ограничение, что страница не может быть отображена правильно. Это должно означать, что устройства, имеющие ширину 768px или меньше, должны отображать вашу таблицу в том виде, в котором вы ее создали, а не в деградированной (одинарной или обернутой форме столбца). Очевидно, что это все еще зависит от содержания столбцов, и в этом весь смысл. Если страница пытается отобразить несколько столбцов больших данных, бок о бок на маленьком экране, то столбцы, естественно, обернутся ужасным образом, если вы этого не учли. Таким образом, в зависимости от данных в Столбцах можно выбрать точку, в которой макет используется для адекватного отображения содержимого.

например, если ваша страница содержит три столбца col-sm-n bootstrap обернет столбцы в строки, когда ширина страницы упадет ниже 992px. Это означает, что данные все еще видны, но для их просмотра потребуется вертикальная прокрутка. Если вы не хотите, чтобы ваш макет ухудшался, выберите xs (если ваши данные могут быть адекватно отображены на более низком уровне разрешение прибора в три колонки)

Если горизонтальное положение данных важно, то вы должны попытаться выбрать более низкие значения детализации, чтобы сохранить визуальный характер. Если позиция менее важна, но страница должна быть видна на всех устройствах, то следует использовать более высокое значение.

Если вы выберете col-lg-n, то столбцы будут отображаться правильно, пока ширина экрана не опустится ниже порога xs 1200px.

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

Относится только к Bootstrap 3.

Игнорирование букв (x s , sm , md , lg ) пока , начну с цифр …

• числа (1-12) представляют собой часть общей ширины любого div
• все div разделены на 12 столбцов
• так, col - * - 6 охватывает 6 из 12 столбцов (половина ширины), col - * - 12 охватывает 12 из 12 столбцов (по всей ширине) и т. Д.

Итак, если вы хотите, чтобы два равных столбца занимали div, напишите

  
 Столбец 1 
 Столбец 2 
  

Или, если вы хотите, чтобы три неравных столбца занимали одинаковую ширину, вы можете написать:

  
 Столбец 1 
 Столбец 2 
 Столбец 3 
  

Вы заметите, что количество столбцов всегда равно 12.Это может быть меньше двенадцати, но будьте осторожны, если больше 12, так как ваши оскорбительные div-ы переместятся на следующую строку (а не на .row , что совсем другое дело).

Вы также можете вложить столбцов в столбцы (лучше всего с оберткой .row вокруг них), например:

  

  

    
 Колонка 1-а 
    
 Столбец 1-b 
  


  

    
 Колонка 2-а 
    
 Колонка 2-б 
  

  

Каждый набор вложенных div также охватывает до 12 столбцов своего родительского div. ПРИМЕЧАНИЕ: Поскольку каждый класс .col имеет отступы по 15 пикселей с каждой стороны, вам обычно следует заключать вложенные столбцы в .row с полями -15 пикселей. Это позволяет избежать дублирования заполнения и позволяет выстраивать содержимое между вложенными и невложенными классами col.

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

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

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

Читать «Сетка Комплектация » главу из официальной документации Bootstrap для более подробной информации.

Вы должны обычно классифицировать div, используя несколько классов столбцов, поэтому он ведет себя по-разному в зависимости от размера экрана (это суть того, что делает загрузку отзывчивой). например: div с классами col-xs-6 и col-sm-4 будет охватывать половину экрана мобильного телефона (xs) и 1/3 экрана планшета (sm).

  
 Столбец 1 
 
 Столбец 2 
 
  

ПРИМЕЧАНИЕ: в соответствии с комментарием ниже, классы сетки для данного размера экрана применяются к этому размеру экрана и более , если другое объявление не отменяет его (т.е. 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 столбцов, если вы знаете, как они отреагируют. — Это спорный вопрос, и не все согласны.

html — `col-xs- *` не работает в Bootstrap 4

Я не сталкивался с этим раньше, и мне очень трудно найти решение. При наличии столбца, равного среднему в начальной загрузке, например:

   
 Привет, мир! 
 

  

      

          

               
 Вики Уильямс 
 
          
      
  
  

Text-align отлично работает:

Но если сделать столбец очень маленьким, например:

  

      

          

               
 Вики Уильямс 
 
          
      
  
  

Тогда выравнивание текста больше не работает:

Есть ли какая-то концепция начальной загрузки, которую я не понимаю, или это на самом деле ошибка, как я думаю.У меня никогда не было этой проблемы, так как мой текст всегда выровнялся в прошлом с xs. Любая помощь будет принята с благодарностью. Вот мой полный код:

  

  
    
    
    

    
    
  
  
     
 Привет, мир! 
 

      

          

              

                   
 Вики Уильямс 
 
              
          
      

    
    " 

  

css - В чем разница между col-lg- *, col-md- * и col-sm- * в Bootstrap?

Давайте упростим Bootstrap!

Обратите внимание, что col-sm занимает 100% ширину (другими словами, переходит в новую строку) ниже 576px , а col - нет.Вы можете заметить текущую ширину в центре вверху gif.

Вот код:

  

    

        
 col 
        
 col 
        
 col 
    
    

        
 col-sm 
        
 col-sm 
        
 col-sm 
    

  

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

Обратите внимание, что в начальной загрузке 4 нет класса col-xs .

Это в значительной степени подведение итогов. Вы можете вернуться к работе.

Но это еще не все. Теперь идет col- * и col-xx- * для настройки ширины.

Помните, что в приведенном выше примере я упоминал, что col или col-xx имеют одинаковую ширину в строке. Итак, если мы хотим увеличить ширину для определенного col , мы можем это сделать.

Строка начальной загрузки разделена на 12 частей, поэтому в приведенном выше примере было 3 столбцов , поэтому каждая занимает 12/3 = 4 части. Вы можете рассматривать эти детали как способ измерения ширины.

Мы могли бы также написать это в формате col- * , т.е. col-4 вот так:

  

  
 col 
  
 col 
  
 col 

  

И это не имело бы никакого значения, потому что по умолчанию bootstrap дает равную ширину col (4 + 4 + 4 = 12).

Но что, если мы хотим отдать 7 частей 1-му столбцу , 3 части 2-му столбцу и оставшиеся 2 части (12-7-3 = 2) 3-му столбцу (7 + 3 + 2 итого равно 12), мы можем просто сделать это:

  

  
 col-7 
  
 col-3 
  
 col-2 

  

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

  

    
 col-sm-7 
    
 col-sm-3 
    
 col-sm-2 

  

Как это выглядит в действии?

Что делать, если сумма столбца больше 12? Затем col сместится / отрегулируется до нижней линии.Да, в строке может быть любое количество столбцов!

  

        
 col-12 
        
 col-9 
        
 col-6 
        
 col-6 
    
  

Что, если нам нужно 3 столбца подряд для больших экранов, но разделить эти столбцы на 2 строки для маленьких экранов?

  

    
 col-12 col-sm TOP 
    
 col col-sm 
    
 col col-sm 

  

Вы можете поиграть здесь: https: // jsfiddle.net / JerryGoyal / 6vqno0Lm /

и сетка | Компоненты

Используйте мощную сетку flexbox для мобильных устройств (через компоненты , , и ) для создавать макеты всех форм и размеров благодаря системе из двенадцати столбцов, пяти адаптивным уровням по умолчанию, переменным и миксинам CSS Sass, а также десяткам предопределенных классов.

BootstrapVue предоставляет несколько удобных функциональных компонентов , адаптированных для макета, которые могут упростить разметку сложной страницы по сравнению с традиционной разметкой Bootstrap v4.Не стесняйтесь переключаться между традиционной разметкой Bootstrap v4 (т.е.

 
  
     1 из 3 
     2 из 3 
     3 из 3 
  


 

 <жидкость в контейнере>
  
 

 
  100% ширины до небольшой точки останова


  100% ширины до средней точки останова


  100% ширины до большой точки останова


  100% ширины до очень большой точки останова
 

 
  
     1 из 2 
     2 из 2 
  

  
     1 из 3 
     2 из 3 
     3 из 3 
  


 

 
  
     Столбец 
     Столбец 
    
 
     Столбец 
     Столбец 
  


 

 
  
     1 из 3 
     2 из 3 (шире) 
     3 из 3 
  

  
     1 из 3 
     2 из 3 (шире) 
     3 из 3 
  


 

 
  
     1 из 3 
     Содержимое переменной ширины 
     3 из 3 
  

  
     1 из 3 
     Содержимое переменной ширины 
     3 из 3 
  


 

 
  
     col 
     col 
     col 
     col 
  

  
     col-8 
     col-4 
  


 

 
  
     col-sm-8 
     col-sm-4 
  

  
     col-sm 
     col-sm 
     col-sm 
  


 

 
  
  
     cols = "12" md = "8" 
     cols = "6" md = "4" 
  

  
  
     cols = "6" md = "4" 
     cols = "6" md = "4" 
     cols = "6" md = "4" 
  

  
  
     cols = "6" 
     cols = "6" 
  


 

 
  
     Один из трех столбцов 
     Один из трех столбцов 
     Один из трех столбцов 
  

  
     Один из трех столбцов 
     Один из трех столбцов 
     Один из трех столбцов 
  

  
     Один из трех столбцов 
     Один из трех столбцов 
     Один из трех столбцов 
  

  
     Один из трех столбцов 
     Один из трех столбцов 
     Один из трех столбцов 
  

  
     Один из трех столбцов 
     Один из трех столбцов 
     Один из трех столбцов 
  


 

 
  
     Один из трех столбцов 
     Один из трех столбцов 
     Один из трех столбцов 
  
  
     Один из двух столбцов 
     Один из двух столбцов 
  


 

 
  
     Один из двух столбцов 
     Один из двух столбцов 
  

  
     Один из двух столбцов 
     Один из двух столбцов 
  

  
     Один из двух столбцов 
     Один из двух столбцов 
  

  
     Один из двух столбцов 
     Один из двух столбцов 
  

  
     Один из двух столбцов 
     Один из двух столбцов 
  


 

 <жидкость в контейнере>
  
     Сначала в DOM, порядок не применяется 
     Второй в DOM, с большим порядком 
     Третий в DOM, с порядком 1 
  

  
     Сначала в DOM, порядка 6 
     Второй в DOM с порядком 1 
     Третий в DOM, порядок не применяется 
  


 

 <жидкость в контейнере>
  
     md = "4" 
     md = "4" offset-md = "4" 
  

  
     md = "3" offset-md = "3" 
     md = "3" offset-md = "3" 
  

  
     md = "6" offset-md = "3" 
  


 

 
  
     sm = "5" md = "6" 
     sm = "5" смещение-sm = "2" md = "6" смещение-md = «0» 
  

  
     sm = "6" md = "5" lg = "6" 
     sm = "6" md = "5" смещение-md = "2 "col-lg =" 6 "смещение-lg =" 0 "
  


 

 <жидкость в контейнере>
  
     md = "4" 
     md = "4" .ml-auto 
  

  
     md = "3" .ml-md-auto 
     md = "3" .ml-md-auto 
  

  
     cols = "auto" .mr-auto 
     cols = "auto" 
  


 

 <жидкость в контейнере>
  
    
      Уровень 1: sm = "9"
      
         Уровень 2: cols = "8" sm = "6" 
         Уровень 2: cols = "4" sm = "6" 
      
    
  


 

 
  
     Столбец 
     Столбец 
     Столбец 
     Столбец 
  



  
     Столбец 
     Столбец 
     Столбец 
     Столбец 
  



  
     Столбец 
     Столбец 
     Столбец 
     Столбец 
  



  
     Столбец 
     Столбец 
     Столбец 
     Столбец 
  


 

 
  
     Столбец 
     Столбец 
     Столбец 
     Столбец 
     Столбец 
     Столбец 
  


 

  
 Столбец 1 
 Столбец 2 
  

  
 Столбец 1 
 Столбец 2 
 Столбец 3 
  

  

  

    
 Колонка 1-а 
    
 Столбец 1-b 
  


  

    
 Колонка 2-а 
    
 Колонка 2-б 
  

  

  
 Столбец 1 
 
 Столбец 2 
 
  

   ... 

  
 {Produto} 
  

  

    

        
 Адаптивный 
    
  

  .col-xs-6 {
  флекс-основа: 50%;
}  

  

    

        
 12 
    
  

  

    

        
 смещение 
    
  

  

    

        
 авто 
    
  

  

    

        

            

                

                    
 авто 
                
            
        
    
  

  

    

        

            Начните
        
    

  

  

    

        

            Начните
        
    

  

  

    

        

            конец
        
    

  

  

    

        

            Все вместе сейчас
        
    

  

  

    

        

            Топ
        
    

  

  

    

        

            центр
        
    

  

  

    

        

            Нижний
        
    

  

  

    

        

            около
        
    
    

        

            около
        
    
    

        

            около
        
    

  

  

    

        

            между
        
    
    

        

            между
        
    
    

        

            между