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

Содержание

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

Применяется только к Bootstrap 3.

Игнорируя буквы (x s , sm , md , lg) , я начну только с цифр...

  • числа (1-12) представляют собой часть общей ширины любого div
  • все дивы разделены на 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>

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

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

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

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

Прочитайте " Сетку Дополнительные сведения см. в главе "Параметры" официальной документации по начальной загрузке.

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

<div>Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div>Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->

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

и больше , если другое объявление не переопределяет его (т. е. col-xs-6 col-md-4 охватывает 6 столбцов в xs и sm и 4 столбца в md и lg , хотя sm и lg никогда не были явно объявлены)

NOTE: если вы не определяете xs , по умолчанию он будет равен col-xs-12 (т. е. col-sm-6 -это половина ширины на экранах sm , md и lg , но полная ширина на экранах xs ).

NOTE: на самом деле все в порядке, если ваш .row включает в себя более 12 колов, если вы знаете, как они отреагируют. --Это спорный вопрос, и не все с ним согласны.

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

Давайте не будем усложнять Bootstrap!

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

Вот код:

<div>
    <div>
        <div>col</div>
        <div>col</div>
        <div>col</div>
    </div>
    <div>
        <div>col-sm</div>
        <div>col-sm</div>
        <div>col-sm</div>
    </div>
</div>

Bootstrap по умолчанию выравнивает все столбцы ( ) в одной строке с одинаковой шириной. В этом случае три 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>
  <div>col</div>
  <div>col</div>
  <div>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>
  <div>col-7</div>
  <div>col-3</div>
  <div>col-2</div>
</div>

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

<div>
    <div>col-sm-7</div>
    <div>col-sm-3</div>
    <div>col-sm-2</div>
</div>

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

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

<div>
        <div>col-12</div>
        <div>col-9</div>
        <div>col-6</div>
        <div>col-6</div>
    </div>

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

2 строки для маленьких экранов?

<div>
    <div>col-12 col-sm TOP</div>
    <div>col col-sm</div>
    <div>col col-sm</div>
</div>

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

Bootstrap-потребность в "col-sm-12"? - CodeRoad.Wiki



простой вопрос-Нужен ли <div> ?

Пример 1:

<div>
    <h2>title</h2>
    <div>
        half
    </div>
    <div>
        half
    </div>
</div>

Пример 2:

<div>
    <div>
        <h2>title</h2>
    </div>
    <div>
        half
    </div>
    <div>
        half
    </div>
</div>

Что лучше и почему? Спасибо.

html twitter-bootstrap twitter-bootstrap-3
Поделиться Источник adminko     09 мая 2016 в 08:12

2 ответа


  • Код не укладывается в col-sm-12

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

  • "col-xs-12 col-sm-6 col-md-4 col-lg-3" с col-xs-12 центром страницы

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



3

Все сетки начальной загрузки работают как ваш второй пример. .row элемент имеет отрицательное поле, чтобы компенсировать положительное заполнение в .col-* элементах. Так что ваш второй пример лучше и логичнее.

В первом примере у вас нет отступов элементов .col-*

, и отрицательное поле приведет к неожиданным результатам.

Пример с

col-sm-12 :
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div>
    <div>
        <h2>title</h2>
    </div>
    <div>
        half
    </div>
    <div>
        half
    </div>
</div>

Пример без

col-sm-12 :
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div>
    <h2>title</h2>
    <div>
        half
    </div>
    <div>
        half
    </div>
</div>

Как вы можете видеть, во втором примере вы получите отрицательное поле в элементе <h2> . Вот почему вы должны всегда использовать столбцы в строках.

Поделиться Marcos Pérez Gude     09 мая 2016 в 08:16



1

Что ж, я предлагаю вам использовать следующий способ:

<h2>title</h2>
<div>
    <div>
        half
    </div>
    <div>
        half
    </div>
</div>

Таким образом, нам не нужно беспокоиться о проблеме-ve margin или какой-либо другой проблеме компоновки. Это хорошее правило, что столбцы сетки начальной загрузки должны быть только прямыми дочерними элементами .row

Поделиться

Mohammad Usman     09 мая 2016 в 08:23


Похожие вопросы:


col-*-12 (col-xs / col-sm / etc) использование в Bootstrap 3

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


Bootstrap col-xs и col-sm

мой 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...


Bootstrap-использование Push/Pull с col-12?

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


Код не укладывается в col-sm-12

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


"col-xs-12 col-sm-6 col-md-4 col-lg-3" с col-xs-12 центром страницы

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


Bootstrap col-md-4 - col-sm-6

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


Bootstrap col-md-12, col-sm-12 не работает с bootstraps selectpicker

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


Почему col-sm-12 добавляет маржу, которую col-sm не делает в bootstrap?

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


Bootstrap 4 col-sm-6 внутри col-sm-6 не работает

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


Bootstrap 4-col с col-sm-12 не реагирует

Я использую 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 (т.е.

s и классы) и удобными компонентами функциональной компоновки BootstrapVue.

Как это работает

Система сеток Bootstrap использует ряд контейнеров, строк и столбцов для компоновки и выравнивания содержимого. Он построен с использованием Flexbox и полностью адаптивен. Ниже приведен пример и подробное рассмотрение того, как объединяется сетка.

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


 

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

Вот как это работает:

  • Контейнеры предоставляют средства для центрирования и горизонтального размещения содержимого вашего сайта. Используйте для ширины адаптивного пикселя или для ширины : 100% для всех размеров области просмотра и устройства.
  • Строки - это обертки для столбцов. Каждый столбец имеет горизонтальный отступ (называемый желобом) для управления пространством между ними.Затем этому заполнению противодействуют строки с отрицательными полями. Таким образом, все содержимое ваших столбцов визуально выравнивается по левому краю.
  • В макете сетки содержимое должно быть размещено внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк.
  • Благодаря flexbox, столбцы сетки без установленной ширины будут автоматически компоноваться с одинаковой шириной. Например, четыре экземпляра каждый автоматически будут иметь ширину 25% для небольших точек останова.
  • Column prop cols указывает количество столбцов, которое вы хотели бы использовать из возможных 12 в строке независимо от точки останова (начиная с точки останова xs ). Итак, если вам нужны три столбца одинаковой ширины в любой точке останова, вы можете использовать .
  • Свойства столбцов sm , md , lg , xl указывают количество столбцов, которые вы хотите использовать из возможных 12 в строке, в различных точках останова.Итак, если вам нужны три столбца одинаковой ширины в точке останова sm , вы можете использовать . специальное значение auto может использоваться, чтобы занять оставшееся доступное пространство столбцов в строке.
  • Ширина столбца задается в процентах, поэтому они всегда гибкие и имеют размер относительно их родительского элемента.
  • Столбцы имеют горизонтальное заполнение для создания промежутков между отдельными столбцами, однако вы можете удалить поле из и заполнение из , установив значение no -gutters prop на .
  • Чтобы сетка реагировала, существует пять точек останова сетки, по одной для каждой ответной точки останова: все точки останова (очень маленькие), маленькие, средние, большие и очень большие.
  • Точки останова сетки основаны на медиа-запросах минимальной ширины, то есть они применяются к этой одной точке останова и ко всем тем, что выше нее (например, применяется к малым, средним, большим и очень большие устройства, но не первая точка останова xs ).
  • Вы можете использовать предопределенные классы сетки или примеси Sass для более семантической разметки.

Помните об ограничениях и ошибках flexbox, таких как невозможность использовать некоторые элементы HTML в качестве гибких контейнеров.

Контейнеры

Контейнеры ( ) являются самым основным элементом макета в Bootstrap. Выберите из адаптивного контейнера фиксированной ширины (что означает, что его максимальная ширина изменяется в каждой точке останова) по умолчанию, или гибкую ширину (что означает, что он всегда на 100% шириной), установив свойство 'Fluid', или отзывчивые контейнеры, где контейнер остается текучим до определенной точки останова (требуется Bootstrap CSS v4.4+ ).

Хотя контейнеры могут быть вложенными, для большинства макетов вложенный контейнер не требуется.

Ширина точки останова по умолчанию может быть настроена с помощью переменных SCSS Bootstrap V4.x. Дополнительные сведения см. На справочной странице Theming, а также в таблице в разделе «Параметры сетки» ниже.

Контейнер по умолчанию

По умолчанию является адаптивным контейнером фиксированной ширины, то есть его максимальная ширина изменяется в каждой точке останова ширины области просмотра.

 
  
 

Контейнер ширины флюида

Использование опоры флюида на отрендерит контейнер, ширина которого всегда равна 100%, независимо от точки останова окна просмотра.

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

Установка для свойства fluid значения true (или пустой строки) эквивалентна классу Bootstrap .container-fluid .

Контейнеры с реагирующей жидкостью

Требуется Bootstrap v4.4+ CSS

Адаптивные контейнеры появились впервые в Bootstrap v4.4. Они позволяют вам указать контейнер шириной 100% (текучий) до тех пор, пока не будет достигнута определенная точка останова, в которой применяется max-width . Например, установка prop fluid на 'md' отрендерит контейнер со 100% шириной для начала до тех пор, пока не будет достигнута точка излома 'md' , после чего он станет стандартным не текучим контейнером.

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


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


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


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

Установка для свойства fluid prop имени точки останова переводится в класс Bootstrap .контейнер- {точка останова} .

Значения ширины контейнера по умолчанию см. В таблице раздела «Параметры сетки» ниже.

Строки

и

Строки являются оболочками для столбцов. Каждый столбец имеет горизонтальный отступ (называемый желобом) для управления пространством между ними. Затем этому заполнению противодействуют строки с отрицательными полями. Таким образом, все содержимое ваших столбцов визуально выравнивается по левому краю.

Вы можете удалить поля из и отступы из , установив опору без желобов на .

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

Столбцы

Должны быть размещены внутри компонента или элемента (например,

), имеющего класс строка , примененная к нему, или - в случае форм - внутри компонента (для получения столбцов с более компактными полями).

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

В то время как Bootstrap использует em или rem единиц для определения большинства размеров, пикселей s используются для точек останова сетки и ширины контейнера. Это связано с тем, что ширина области просмотра указана в пикселях и не изменяется с размером шрифта.

Посмотрите, как аспекты системы сеток Bootstrap работают на нескольких устройствах, с помощью удобной таблицы.

Очень маленький (xs)
<576px
Маленький (см)
≥576px
Средний (md)
Большой lg)
≥992px
Очень большой (xl)
≥1200px
Макс.
Prop cols = "*" sm = "*" md = "*" lg = "*" xl = "*"
Кол-во столбцов 12
Ширина желоба 30 пикселей (по 15 пикселей с каждой стороны столбца)
Nestable Да
Offs et offset = "*" offset-sm = "*" offset-md = "*" offset-lg = "*" offset-xl = "*"
Order order = "*" order-sm = "*" order-md = "*" order-lg = "*" order-xl = "*"

Примечания:

  • Нет xs prop.Опора cols указывает на точку останова xs (наименьшую).
  • Указанные выше значения и имена точек останова являются значениями по умолчанию для начальной загрузки. Их можно настроить с помощью переменных SCSS и (если также используются пользовательские имена точек останова) с помощью глобальной конфигурации BootstrapVue.

Размеры контейнера

В следующей таблице указаны максимальные значения ширины контейнера по умолчанию в различных точках останова. Они могут отличаться, если вы используете настраиваемый тематический Bootstrap v4 SCSS / CSS.

23 Сверхбольшой 90 по умолчанию 908 100% 100614 % 100614
Тип контейнера Сверхмалый <576px Маленький ≥576px Средний ≥768px Большой ≥992px Большой ≥992px
100% 540px 720px 960px 1140px
жидкость 10014 9014
100% 100%
жидкость = "sm" 100% 540px 540px 720650px 9027 1140px
жидкость = "md" 100% 100% 720px 960px 1140px
жидкость = «lg» 9015% 100% 960px 1140px
жидкость = «xl» 100% 100% 1140px

Дополнительную информацию см. В разделе «Контейнеры » выше

Столбцы с автоматической компоновкой например,

.

Столбцы одинаковой ширины

Например, вот два макета сетки, которые применяются к каждому устройству и окну просмотра, от xs до xl . Добавьте любое количество классов без единиц для каждой нужной точки останова, и каждый столбец будет одинаковой ширины.

 
  
     1 из 2 
     2 из 2 
  

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


 

Многострочные строки одинаковой ширины

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

Была ошибка Safari flexbox, из-за которой это не работало без явного flex-base или границы . Существуют обходные пути для более старых версий браузеров, но в них нет необходимости, если ваши целевые браузеры не попадают в версии с ошибками.

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

Установка ширины одного столбца

Автоматическая компоновка столбцов сетки flexbox также означает, что вы можете установить ширину одного столбца и автоматически изменять размер столбцов-братьев вокруг него.Вы можете использовать предопределенные классы сетки (как показано ниже), миксины сетки или встроенную ширину. Обратите внимание, что размер других столбцов изменится независимо от ширины центрального столбца.

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

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


 

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

Используйте свойства {breakpoint} = "auto" для изменения размера столбцов на основе естественной ширины их содержимого.

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

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


 

Адаптивные классы

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

Все точки останова

Для сеток, одинаковых от самых маленьких до самых больших, используйте свойства col и cols = "*" . Укажите количество столбцов , если вам нужен столбец определенного размера; в противном случае не стесняйтесь придерживаться col (который применяется автоматически, если не указаны cols ).

 
  
     col 
     col 
     col 
     col 
  

  
     col-8 
     col-4 
  


 

Сгруппировано по горизонтали

Используя один набор из sm = "*" или sm (логическое значение для равной ширины @sm), вы можете создать базовую сеточную систему, которая начинается с укладки на сверхмалые устройства, прежде чем стать горизонтально на настольных (средних) устройствах.

 
  
     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" 
  


 

Выравнивание

Используйте утилиты выравнивания flexbox для вертикального и горизонтального выравнивания столбцов.

Примечание. Internet Explorer 11 не поддерживает вертикальное выравнивание гибких элементов, если гибкий контейнер имеет минимальную высоту , как показано ниже. См. Flexbugs # 3 для более подробной информации.

Вертикальное выравнивание

Для вертикального выравнивания всех ячеек сетки в строке используйте опору align-v на . Возможные значения: 'start' , 'center' , 'end' , 'baseline' и 'stretch' :

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

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

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

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

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


 

Для вертикального выравнивания отдельных ячеек сетки используйте опору align-self на .Возможные значения: 'start' , 'center' , 'end' , 'baseline' и 'stretch' :

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


 

Выравнивание по горизонтали

Чтобы выровнять ячейки сетки по горизонтали в строке, используйте опору align-h на .Возможные значения: 'начало' , 'центр' , 'конец' , 'вокруг' и 'между' :

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

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

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

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

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


 

Изменение порядка

Столбцы упорядочивания

Используйте реквизиты order- * для управления визуальным порядком вашего контента.Эти свойства являются адаптивными, поэтому вы можете установить порядок по точке останова (например, order = "1" order-md = "2" ). Включает поддержку от 1 до 12 на всех пяти уровнях сетки. по умолчанию имеет значение заказа 0 .

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

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


 

Порядок контролируется стилем CSS flexbox order .

Смещение столбцов

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

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

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

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


 

В дополнение к очистке столбца в ответных точках останова вам может потребоваться сбросить смещения, установив смещение на 0 в более крупной точке останова:

 
  
     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 "
  


 

Утилиты полей для столбцов

С переходом на flexbox в Bootstrap v4 вы можете использовать служебные классы полей и интервалов, такие как .mr-auto , чтобы отодвинуть соседние столбцы друг от друга.

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

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

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


 

Вложенные сетки

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

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


 

Столбцы строк

Требуется Bootstrap v4.4+ CSS

Используйте отзывчивые реквизиты cols- * в , чтобы быстро установить количество столбцов, которые лучше всего отображают ваш контент и макет. В то время как обычная ширина столбцов применяется к отдельным столбцам (например, ), свойства столбцов строки col- * устанавливаются для родительского < b-row> в качестве ярлыка.

Используйте эти столбцы строк для быстрого создания базовых макетов сетки или для управления макетами карточек.Максимальное количество столбцов строк по умолчанию в Bootstrap v4.4 составляет 6 (в отличие от обычных столбцов, которые имеют максимальное значение по умолчанию 12 столбцов)

Значение, указанное в свойствах - это количество столбцов, которые нужно создать для каждой строки (тогда как реквизиты на относятся к количеству занимаемых столбцов).

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



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



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



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


 

Вы можете контролировать количество столбцов на каждом уровне точки останова с помощью следующих свойств :

  • cols для xs и выше экранов
  • cols-sm для sm и вверх экрана
  • cols-md для md и выше экранов
  • cols-lg для lg и выше экранов
  • cols-xl для xl и выше экранов
 
  
     Столбец 
     Столбец 
     Столбец 
     Столбец 
     Столбец 
     Столбец 
  


 

Утилиты для разметки

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

Изменение отображения

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

Параметры Flexbox

Bootstrap 4 построен с использованием flexbox, но не каждый элемент display был изменен на display: flex , так как это добавило бы много ненужных переопределений и неожиданно изменило бы поведение основных браузеров.Большинство компонентов построено с включенным flexbox.

Если вам нужно добавить display: flex к элементу, сделайте это с помощью .d-flex или одного из адаптивных вариантов (например, .d-sm-flex ). Вам понадобится этот класс или отобразить значение , чтобы можно было использовать дополнительные утилиты Flexbox для изменения размера, выравнивания, интервала и т. Д.

Margin and padding

Используйте утилиты интервалов margin и padding для управления расположением и размером элементов и компонентов.Bootstrap 4 включает пятиуровневую шкалу для разбивки утилит, основанную на переменной SASS $ spacer по умолчанию для значения 1rem . Выберите значения для всех окон просмотра (например, .mr-3 для margin-right: 1rem ) или выберите адаптивные варианты для нацеливания на определенные области просмотра (например, .mr-md-3 для margin-right: 1rem , начиная с точки останова md ).

Переключить видимость

При переключении отображение не требуется, вы можете переключить видимость элемента с помощью служебных классов видимости.Невидимые элементы по-прежнему будут влиять на макет страницы, но визуально скрыты от посетителей.

Значение чисел в «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 столбцов, если вы знаете, как они отреагируют. - Это спорный вопрос, и не все согласны.


Сетка Bootstrap имеет четыре класса:
xs (для телефонов)
sm (для планшетов)
md (для настольных компьютеров)
lg (для больших настольных компьютеров)

Приведенные выше классы можно комбинировать для создания более динамичных и гибких макетов.

Совет: Каждый класс масштабируется, поэтому, если вы хотите установить одинаковую ширину для xs и sm, вам нужно только указать xs.

Хорошо, ответ прост, но читайте дальше:

col-lg- обозначает большой столбец ≥ 1200px
col-md- обозначает средний столбец ≥ 992px
col-xs- обозначает сверхмалый столбец ≥ 768px

Номера пикселей - это точки останова, поэтому, например, col-xs нацеливается на элемент, когда окно меньше 768px (вероятно, мобильные устройства)...

Я также создал изображение ниже, чтобы показать, как работает система сеток, в этих примерах я использую их с 3, например col-lg-6 , чтобы показать вам, как система сеток работает на странице, посмотрите, как lg , md и xs реагируют на размер окна:

Главное здесь:

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

Пример: если вы хотите, чтобы на экранах рабочего стола и на экранах телефона было две колонки, вы помещаете в свои колонки два класса col-md-6 и два col-xs-6 .

Если вы хотите, чтобы на экранах рабочего стола было два столбца и только один столбец на экранах телефонов (т. Е. Две строки, расположенные друг над другом), поместите два col-md-6 и два col-xs-12 в ваши столбцы, и поскольку сумма будет равна 24, они будут автоматически накладываться друг на друга или просто оставить стиль xs .

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

В самой документации Bootstrap есть сравнительная таблица между классами сетки.

То есть .col-xs- * наборы классов сетка для устройств с шириной экрана более 768 пикселей. Класс .col-sm- * устанавливает для экранов больше, чем 768 пикселей. на основе размера дисплея пользователя.

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

В основном вы говорите браузеру: если ширина экрана пользователя больше, чем больше, чем 768 пикселей, отобразите этот div , занимающий 6 из 12 столбцов общей сетки.Уже, если ширина меньше 768 пикселей, отображать его, занимая 12 столбцов сетки.

   ... 

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

  
{Produto}

Таким образом, 1 продукт появится для сверхмалых устройств, занимающих 12 из 12 столбцов сетки, 3 продукта в небольших устройствах, занимающих 4 из 12 столбцов, 4 продукта в средних устройствах, занимающих 3 из 12 столбцов и 6 продуктов в больших устройствах. , занимая 2 из 12 столбцов.

Personal Note: сеточная система в представленной форме является основной функциональностью Bootstrap, реализующей философию и скорость реагирования Mobile First. Если вы уже используете его и не знаете такой разницы, я рекомендую вам еще немного изучить документацию, прежде чем продолжить или искать другой метод обучения. (Примите это как положительный отзыв)

Flexbox Grid

Responsive

Responsive модификаторы позволяют указывать различные размеры столбцов, смещения, выравнивание и распределение при ширине окна просмотра xs, sm, md и lg.

  
Адаптивный

Fluid

Ширина на основе процентов позволяет плавно изменять размер столбцов и строк.

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

Простой синтаксис

Все, что вам нужно запомнить, - это строка, столбец, содержимое.

  
12

Смещения

Смещение колонны

  
смещение

Автоматическая ширина

Добавьте любое количество столбцов автоматического изменения размера в строку.Пусть решает сетка.

  
авто

Вложенные сетки

Вложенные сетки внутри сеток внутри сеток.

  
авто

Выравнивание

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

.начало-
  
Начните

.центр-
  
Начните

.end-
  
конец

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

Пример
  
Все вместе сейчас

.top-
  
Топ

. Средний-
  
центр

.нижний -
  
Нижний

Распределение

Добавьте классы для распределения содержимого строки или столбца.

. Вокруг -
  
около
около
около

.между-
  
между
между
между

Изменение порядка

Добавьте классы для изменения порядка столбцов.

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

© 2019 Штирлиц Сеть печатных салонов в Перми

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