Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Bootstrap center: File not found · Bootstrap v5.0

Содержание

Flex. Утилиты · Bootstrap. Версия v4.0.0

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



Задействуйте «гибкое» поведение


Применяйте утилиты display для создания гибкого контейнера и трансформируйте прямые дочерние элементы в «гибкие». Гибкие контейнеры и элементы можно изменять дополнительными свойствами гибкости.


Я — контейнер flexbox!

<div>Я - контейнер flexbox!</div>


Я встроенный контейнер flexbox!

<div>Я встроенный контейнер flexbox!</div>


Также существуют отзывчивые варианты .d-flex и .d-inline-flex.


  • . d-flex
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex

Направление


Задайте направление гибких элементов в гибком контейнере утилитами направления. В большинстве случаев вы можете пропустить «горизонтальный класс» в данном случае, т.к. умолчание браузера – row. Однако вы можете попасть в ситуацию, где вам понадобится явно задать это значение (например, при разработке отзывчивой верстки).


Используйте элемент класса .flex-row для задания горизонтального направления (умолчание браузера), или .flex-row-reverse для того, чтобы горизонтальное направление начиналось с противоположной стороны.


Flex элемент 1

Flex элемент 2

Flex элемент 3

Flex элемент 1

Flex элемент 2

Flex элемент 3

<div>
  <div>Flex элемент 1</div>
  <div>Flex элемент 2</div>
  <div>Flex элемент 3</div>
</div>
<div>
  <div>Flex элемент 1</div>
  <div>Flex элемент 2</div>
  <div>Flex элемент 3</div>
</div>


Используйте класс .flex-column для создания вертикального направления, или .flex-column-reverse, чтобы вертикальное направление начиналось с противоположной стороны.


Flex элемент 1

Flex элемент 2

Flex элемент 3

Flex элемент 1

Flex элемент 2

Flex элемент 3

<div>
  <div>Flex элемент 1</div>
  <div>Flex элемент 2</div>
  <div>Flex элемент 3</div>
</div>
<div>
  <div>Flex элемент 1</div>
  <div>Flex элемент 2</div>
  <div>Flex элемент 3</div>
</div>


Для flex-direction также есть отзывчивые вариации.


  • .flex-row
  • .flex-row-reverse
  • .flex-column
  • .flex-column-reverse
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-column
  • .flex-sm-column-reverse
  • .flex-md-row
  • .flex-md-row-reverse
  • .flex-md-column
  • .flex-md-column-reverse
  • .flex-lg-row
  • .flex-lg-row-reverse
  • .flex-lg-column
  • .flex-lg-column-reverse
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-column
  • .flex-xl-column-reverse

Выравнивайте содержимое


Пользуйтесь утилитами justify-content или контейнерами флексбокса для изменения выравнивания гибких элементов по главной оси (ось х по умолчанию, ось у – если flex-direction: column). Выбирайте из start (умолчание браузера), end, center, between или around.


Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент


<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>

Отзывчивые вариации для justify-content.


  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • . justify-content-around
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • . justify-content-xl-between
  • .justify-content-xl-around

Выравнивание элементов


Используйте утилиты align-items в контейнерах флексбокса для изменения выравнивания гибких элементов по перекрестной оси (ось у по умолч., ось х – если flex-direction: column). Выбирайте из start, end, center, baseline или stretch (умолчание браузера).


Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент


<div>...</div>
<div>...</div>
<div>. ..</div>
<div>...</div>
<div>...</div>

Отзывчивые вариации для align-items.


  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • . align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch

Align self


Используйте утилиты align-self в гибких элементах для индивидуального изменения их выравнивания по перекрестной оси (ось у по умолч., ось х – если flex-direction: column). Выбирайте из таких же параметров, как у align-items: start, end, center, baseline или stretch (умолчание браузера).


Flex элемент

Выровненный элемент flex

Flex элемент

Flex элемент

Выровненный элемент flex

Flex элемент

Flex элемент

Выровненный элемент flex

Flex элемент

Flex элемент

Выровненный элемент flex

Flex элемент

Flex элемент

Выровненный элемент flex

Flex элемент


<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>

Отзывчивые вариации для align-self.


  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • . align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch

Авто-марджины


Флексбокс может невероятные вещи – если вы сочетаете выравнивание гибких элементов с авто-марджинами. Три примера ниже показывают контроль над гибкими элементами через авто-марджины: 1. по умолчанию (нет авто-марджина), 2. «прижимаем» два элемента к правому краю (.mr-auto), 3. «прижимаем» два элемента к левому краю (.ml-auto).


К несчастью, IE10 и IE11 не очень-то поддерживают авто-марджины в гибких элементах, чьи «родительские элементы» имеют атрибут justify-content. Смотри детали здесь.


Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>


С элементами выравнивания


Передвигайте по вертикали один из гибких элементов к верху или низу контейнера, сочетая align-items, flex-direction: column и margin-top: auto или margin-bottom: auto.


Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>


Обертка


Изменяйте способ оборачивания гибких элементов в гибком контейнере. Можете совсем не оборачивать их (умолчание браузера) с классом .flex-nowrap, можете обернуть их классом .flex-wrap или реверсируйте оборачивание с классом .flex-wrap-reverse.


Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент


<div>
  . ..
</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент


<div>
  ...
</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент


<div>
  ...
</div>

Отзывчивые вариации есть также для flex-wrap.


  • .flex-nowrap
  • .flex-wrap
  • .flex-wrap-reverse
  • .flex-sm-nowrap
  • .flex-sm-wrap
  • .flex-sm-wrap-reverse
  • .flex-md-nowrap
  • .flex-md-wrap
  • .flex-md-wrap-reverse
  • .flex-lg-nowrap
  • .flex-lg-wrap
  • .flex-lg-wrap-reverse
  • .flex-xl-nowrap
  • .flex-xl-wrap
  • .flex-xl-wrap-reverse

Порядок


Мы создали параметры лишь для придания элементу первого или последнего порядкового положения, как и для сброса данной настройки для использования порядка DOM. Так как order принимает цифровое значение (например, 5), добавьте обычный CSS для создания необходимых дополнительных значений.


Первый flex элемент

Второй flex элемент

Третий flex элемент

<div>
  <div>Первый flex элемент</div>
  <div>Второй flex элемент</div>
  <div>Третий flex элемент</div>
</div>


Отзывчивые вариации есть также для order.


  • .order-0
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-6
  • .order-7
  • .order-8
  • .order-9
  • .order-10
  • .order-11
  • .order-12
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-sm-6
  • .order-sm-7
  • .order-sm-8
  • .order-sm-9
  • .order-sm-10
  • .order-sm-11
  • .order-sm-12
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-md-6
  • .order-md-7
  • .order-md-8
  • .order-md-9
  • .order-md-10
  • .order-md-11
  • .order-md-12
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-lg-6
  • .order-lg-7
  • .order-lg-8
  • .order-lg-9
  • .order-lg-10
  • .order-lg-11
  • .order-lg-12
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xl-6
  • .order-xl-7
  • .order-xl-8
  • .order-xl-9
  • .order-xl-10
  • .order-xl-11
  • .order-xl-12

Выравнивание содержимого


Используйте утилиты align-content в контейнерах флексбокса, чтобы гибкие элементы выравнивались «вместе» по одной перекрестной оси. Выбирайте из start (умолчание браузера), end, center, between, around или stretch. Чтобы продемонстрировать эти утилиты, мы применили flex-wrap: wrap и увеличили количество элементов flex.


Внимание! Это свойство не действует на одиночных рядах или одиночных гибких элементах.


Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент


<div>
  ...
</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент


<div>...</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент


<div>...</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент


<div>...</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент


<div>...</div>

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент

Flex элемент


<div>...</div>

Отзывчивые вариации есть также для align-content.


  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-around
  • .align-content-xl-stretch

Bootstrap 4: разница между text-center и justify-content-center

И text-center, и justify-content-center, похоже, делают почти одно и то же — центрируют текст. Но какая разница?

css

twitter-bootstrap

bootstrap-4

Поделиться

Источник


Daud    

16 ноября 2018 в 06:59

2 ответа


  • «justify-content-md-end » и» justify-content-center » ведут себя противоположно друг другу

    Насколько я понимаю, когда я использую justify-content-md-end, он должен позиционировать содержимое вправо, когда окно сжимается. И justify-content-center должен расположить его в центре, когда окно имеет полный размер. Однако в моем случае они ведут себя совершенно противоположно. Регистрация…

  • Bootstrap 4 CSS — justify-content-center выпуск

    Я пытаюсь центрировать каждую форму. (вход и регистрация ) внутри соответствующих столбцов. Это OK для первого, но не для второго. Вот css, который я использую. Что же в этом плохого? <section id=login> <div class=container> <div class=row> <div class=col…



2

текстовый центр

Свойство text-align CSS определяет горизонтальное выравнивание встроенного поля или ячейки таблицы. Это означает, что он работает как вертикальное выравнивание, но в горизонтальном направлении. — MDN

.text-center {
  text-align: center !important;
}

text-center выравнивает встроенный элемент и элемент ячейки таблицы по центру элемента, для которого он используется. Он не изменяет выравнивание элементов блока .


justify-content-center

Элементы упаковываются заподлицо друг к другу по направлению к центру контейнера выравнивания вдоль главной оси.

.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

Чтобы это сработало, вам также нужно использовать d-flex . Он выравнивает все содержимое элемента (inline ,block и flex), для которого вы его используете, по центру элемента. По умолчанию содержимое элемента центрируется по горизонтали, если вы не изменили flex-direction элемента.


Вы можете найти эти ссылки полезными.

Поделиться


mahan    

16 ноября 2018 в 09:01



2

Bootstrap 4 не поддерживает justify-text-center .

Источник: Текст


Может быть, вы ищете что-то вроде этого:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<p>Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

<p>Center aligned text on all viewport sizes.</p>

Я имел в виду, justify-content-center

Разница заключается в следующем: justify-content-* используется для изменения выравнивания элементов flex .

Если div не имеет свойства display: flex . Кажется, это не работает. В то время как text-center не требует свойства display: flex .

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<hr />

<div>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Поделиться


Tân    

16 ноября 2018 в 07:02


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

В чем разница между margin:auto и justify-content / align-items center?

Чтобы центрировать как горизонтально, так и вертикально одновременно, есть два простых варианта: Первый .outer { display:flex; } .inner { margin:auto; } Второй .outer { display: flex;…

Bootstrap 4 : ‘.flex-column’ работает, но не ‘.justify-content-center’

Я работаю над каким-то старым кодом и пытаюсь правильно разместить контент на своей странице, но сталкиваюсь с проблемой : мои свойства flex работают, но не. justify-content -…. Вот мой код :…

Как придать justify-content-center выравнивание штабелируемым столбцам

Мне нужен адаптивный макет с x столбцами, который показывает 3 столбца в строке на lg размерах экрана, выровненных по justify-content-between . В тот момент , когда экран меньше, чем lg , все…

«justify-content-md-end » и» justify-content-center » ведут себя противоположно друг другу

Насколько я понимаю, когда я использую justify-content-md-end, он должен позиционировать содержимое вправо, когда окно сжимается. И justify-content-center должен расположить его в центре, когда окно…

Bootstrap 4 CSS — justify-content-center выпуск

Я пытаюсь центрировать каждую форму. (вход и регистрация ) внутри соответствующих столбцов. Это OK для первого, но не для второго. Вот css, который я использую. Что же в этом плохого? <section…

сломать тег с justify-content-center в bootstrap 4

Я пытаюсь сделать что-то подобное . И способен разместить свой текст прямо посередине вертикали и горизонтали. Но тег break <br> с этим не работает. <div class=container h-100> <div…

QUASAR — Justify-center и screen breakpoints

У меня возникла эта проблема, я искал на форуме, но не нашел ничего связанного. Я пытаюсь использовать justify-center для маленьких экранов и justify-end для больших экранов. Читая документы я нашел…

Почему я не могу объединить justify-content-center и justify-content-lg-left в Bootstrap 4?

У меня есть Bootstrap 4 Jumbotron , содержащий столбец, установленный на разной ширине сетки в зависимости от точки останова. Это здорово , но я также хочу установить столбец влево или в центр…

Bootstrap 4-достижение flex + justify-content-center с 2 элементами

Используя d-flex , justify-content-center и flew-grow-1 , я достиг желаемого результата с 3 дивами. <div class=row bg-primary d-flex justify-content-center> <div class=col-auto> LEFT…

почему justify-content-center не работает в react?

Я сейчас учусь reactjs! Я создал компонент класса с именем WritePostArea и внутри этого компонента использовал класс начальной загрузки с именем justify-content-center для центрирования элемента. Я…

Bootstrap 4 по центру вертикального и горизонтального выравнивания

Обновление 2019 Bootstrap 4.3.1

Там нет необходимости для дополнительного CSS . То, что уже включено в Bootstrap, будет работать. Убедитесь, что контейнер (ы) формы в полный рост . Bootstrap 4 теперь имеет h-100класс для 100% роста …

Вертикальный центр:

<div>
  <div>
    <form>
      <div>
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" placeholder="Example input">
      </div>
      <div>
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" placeholder="Another input">
      </div>
    </form>   
  </div>
</div>

высота контейнера с пунктом (пунктами) по центру должна составлять 100%
(или независимо от желаемой высоты относительно центрального элемента)

Примечание. При использовании height:100%( процентной высоты ) для любого элемента, элемент принимает высоту своего контейнера . В современных браузерах height:100vh;вместо %получения желаемой высоты могут использоваться единицы vh .

Поэтому вы можете установить html, body {height: 100%} или использовать новый min-vh-100класс для контейнера вместо h-100.


Горизонтальный центр:

  • text-centerцентрировать display:inlineэлементы и содержимое столбца
  • mx-auto для центрирования внутри гибких элементов
  • offset-*или mx-autoможет быть использован для центрирования столбцов ( .col-)
  • justify-content-centerв колонках центра ( col-*) внутриrow

Вертикальное выравнивание по центру в Bootstrap 4
Bootstrap 4 полноэкранная центрированная форма
Bootstrap 4 центральная группа ввода
Bootstrap 4 по горизонтали + вертикальный центр по всему экрану

Flex · Bootstrap v5.0

Включить гибкое поведение

Примените утилиты display для создания контейнера flexbox и преобразования прямых дочерних элементов в элементы flex. Гибкие контейнеры и элементы можно дополнительно модифицировать с помощью дополнительных свойств гибкости.

Я контейнер Flexbox!

<div>Я контейнер Flexbox!</div>

Я встроенный контейнер Flexbox!

<div>Я встроенный контейнер Flexbox!</div>

Адаптивные варианты также существуют для .d-flex и .d-inline-flex.

  • .d-flex
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex
  • .d-xxl-flex
  • .d-xxl-inline-flex

Направление

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

Используйте .flex-row, чтобы установить горизонтальное направление (по умолчанию в браузере), или .flex-row-reverse, чтобы начать горизонтальное направление с противоположной стороны.

Флекс элемент 1

Флекс элемент 2

Флекс элемент 3

Флекс элемент 1

Флекс элемент 2

Флекс элемент 3

<div>
  <div>Флекс элемент 1</div>
  <div>Флекс элемент 2</div>
  <div>Флекс элемент 3</div>
</div>
<div>
  <div>Флекс элемент 1</div>
  <div>Флекс элемент 2</div>
  <div>Флекс элемент 3</div>
</div>

Используйте .flex-column, чтобы задать вертикальное направление, или .flex-column-reverse, чтобы задать вертикальное направление с противоположной стороны.

Флекс элемент 1

Флекс элемент 2

Флекс элемент 3

Флекс элемент 1

Флекс элемент 2

Флекс элемент 3

<div>
  <div>Флекс элемент 1</div>
  <div>Флекс элемент 2</div>
  <div>Флекс элемент 3</div>
</div>
<div>
  <div>Флекс элемент 1</div>
  <div>Флекс элемент 2</div>
  <div>Флекс элемент 3</div>
</div>

Адаптивные вариации также существуют для flex-direction.

  • .flex-row
  • .flex-row-reverse
  • .flex-column
  • .flex-column-reverse
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-column
  • .flex-sm-column-reverse
  • .flex-md-row
  • .flex-md-row-reverse
  • .flex-md-column
  • .flex-md-column-reverse
  • .flex-lg-row
  • .flex-lg-row-reverse
  • .flex-lg-column
  • .flex-lg-column-reverse
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-column
  • .flex-xl-column-reverse
  • .flex-xxl-row
  • .flex-xxl-row-reverse
  • .flex-xxl-column
  • .flex-xxl-column-reverse

Выравнивание содержимого

Используйте утилиты justify-content в контейнерах flexbox, чтобы изменить выравнивание элементов Флекс по главной оси (ось x для начала, ось y, если flex-direction: column). Выберите start (по умолчанию в браузере), end, center, between, around или evenly.

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>

Адаптивные варианты также существуют для justify-content.

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-evenly
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-sm-evenly
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-md-evenly
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-lg-evenly
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around
  • .justify-content-xl-evenly
  • .justify-content-xxl-start
  • .justify-content-xxl-end
  • .justify-content-xxl-center
  • .justify-content-xxl-between
  • .justify-content-xxl-around
  • .justify-content-xxl-evenly

Выравнивание элементов

Используйте утилиты align-items на контейнерах flexbox, чтобы изменить выравнивание элементов Флекс по поперечной оси (ось Y в начале, ось X, если flex-direction: column). Выберите start, end, center, baseline или stretch (по умолчанию в браузере).

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>

Адаптивные варианты также существуют для align-items.

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch
  • .align-items-xxl-start
  • .align-items-xxl-end
  • .align-items-xxl-center
  • .align-items-xxl-baseline
  • .align-items-xxl-stretch

Выравнивание себя

Используйте утилиты align-self для элементов flexbox, чтобы индивидуально изменить их выравнивание по поперечной оси (ось Y для начала, ось X, если flex-direction: column). Выберите один из тех же параметров, что и flex-direction: column). Выберите один из тех же вариантов, что и align-items: start, end, center, baseline или stretch (по умолчанию в браузере).

Флекс элемент

Выровненный Флекс элемент

Флекс элемент

Флекс элемент

Выровненный Флекс элемент

Флекс элемент

Флекс элемент

Выровненный Флекс элемент

Флекс элемент

Флекс элемент

Выровненный Флекс элемент

Флекс элемент

Флекс элемент

Выровненный Флекс элемент

Флекс элемент

<div>Выровненный Флекс элемент</div>
<div>Выровненный Флекс элемент</div>
<div>Выровненный Флекс элемент</div>
<div>Выровненный Флекс элемент</div>
<div>Выровненный Флекс элемент</div>

Адаптивные варианты также существуют для align-self.

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch
  • .align-self-xxl-start
  • .align-self-xxl-end
  • .align-self-xxl-center
  • .align-self-xxl-baseline
  • .align-self-xxl-stretch

Заполнение

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

Флекс элемент с большим количеством контента

Флекс элемент

Флекс элемент

<div>
  <div>Флекс элемент с большим количеством контента</div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
</div>

Адаптивные варианты также существуют для flex-fill.

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill
  • .flex-xxl-fill

Увеличиваться и сжимайся

Используйте утилиты .flex-grow-* для переключения способности элемента Флекс расти, чтобы заполнить доступное пространство. В приведенном ниже примере элементы .flex-grow-1 используют все доступное пространство, которое могут, а оставшимся двум элементам Флекс их необходимое пространство.

Флекс элемент

Флекс элемент

Third Флекс элемент

<div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
  <div>Third Флекс элемент</div>
</div>

Используйте утилиты .flex-shrink-* для переключения способности элемента Флекс сжиматься при необходимости. В приведенном ниже примере второй элемент Флекс с .flex-shrink-1 принудительно переносит свое содержимое в новую строку, «сжимаясь», чтобы освободить место для предыдущего элемента Флекс с .w-100.

Флекс элемент

Флекс элемент

<div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
</div>

Адаптивные варианты также существуют для flex-grow и flex-shrink.

  • .flex-{grow|shrink}-0
  • .flex-{grow|shrink}-1
  • .flex-sm-{grow|shrink}-0
  • .flex-sm-{grow|shrink}-1
  • .flex-md-{grow|shrink}-0
  • .flex-md-{grow|shrink}-1
  • .flex-lg-{grow|shrink}-0
  • .flex-lg-{grow|shrink}-1
  • .flex-xl-{grow|shrink}-0
  • .flex-xl-{grow|shrink}-1
  • .flex-xxl-{grow|shrink}-0
  • .flex-xxl-{grow|shrink}-1

Автоматические поля

Flexbox может делать довольно удивительные вещи, когда Вы смешиваете выравнивание гибкости с автоматическими полями. Ниже показаны три примера управления гибкими элементами через автоматические поля: по умолчанию (без автоматического поля), перемещение двух элементов вправо (.me-auto) и перемещение двух элементов влево (.ms-auto) .

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

<div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
</div>

<div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
</div>

<div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
</div>

С помощью align-items

Вертикально переместите один элемент Флекс вверх или вниз контейнера, смешав align-items, flex-direction: column и margin-top: auto или margin-bottom: auto.

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

<div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
</div>

<div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
  <div>Флекс элемент</div>
</div>

Обертка

Измените способ обертки элементов Флекс в гибкий контейнер. Выберите полное отсутствие переноса (по умолчанию в браузере) с помощью .flex-nowrap, обертывание с помощью .flex-wrap или обратное обертывание с помощью .flex-wrap-reverse.

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

<div>
  ...
</div>

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

<div>
  ...
</div>

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

<div>
  ...
</div>

Адаптивные варианты также существуют для flex-wrap.

  • .flex-nowrap
  • .flex-wrap
  • .flex-wrap-reverse
  • .flex-sm-nowrap
  • .flex-sm-wrap
  • .flex-sm-wrap-reverse
  • .flex-md-nowrap
  • .flex-md-wrap
  • .flex-md-wrap-reverse
  • .flex-lg-nowrap
  • .flex-lg-wrap
  • .flex-lg-wrap-reverse
  • .flex-xl-nowrap
  • .flex-xl-wrap
  • .flex-xl-wrap-reverse
  • .flex-xxl-nowrap
  • .flex-xxl-wrap
  • .flex-xxl-wrap-reverse

Порядок

Измените визуальный порядок определенных элементов Флекс с помощью нескольких утилит order. Мы предоставляем только варианты создания элемента первым или последним, а также сброс для использования порядка DOM. Поскольку order принимает любое целочисленное значение от 0 до 5, добавьте собственный CSS для любых дополнительных значений.

First Флекс элемент

Second Флекс элемент

Third Флекс элемент

<div>
  <div>First Флекс элемент</div>
  <div>Second Флекс элемент</div>
  <div>Third Флекс элемент</div>
</div>

Адаптивные варианты также существуют для order.

  • .order-0
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xxl-0
  • .order-xxl-1
  • .order-xxl-2
  • .order-xxl-3
  • .order-xxl-4
  • .order-xxl-5

Кроме того, существуют также адаптивные классы .order-first и .order-last, которые изменяют order элемента, применяя order: -1 и order: 6 соответственно.

  • .order-first
  • .order-last
  • .order-sm-first
  • .order-sm-last
  • .order-md-first
  • .order-md-last
  • .order-lg-first
  • .order-lg-last
  • .order-xl-first
  • .order-xl-last
  • .order-xxl-first
  • .order-xxl-last

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

Используйте утилиты align-content на контейнерах flexbox для выравнивания элементов Флекс вместе по поперечной оси. Выберите start (по умолчанию для браузера), end, center, between, around или stretch. Чтобы продемонстрировать эти утилиты, мы ввели в действие flex-wrap: wrap и увеличили количество элементов Флекс.

Внимание! Это свойство не влияет на отдельные строки элементов Флекс.

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

<div>
  ...
</div>

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

<div>...</div>

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

<div>...</div>

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

<div>...</div>

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

<div>...</div>

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

Флекс элемент

<div>...</div>

Адаптивные варианты также существуют для align-content.

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-around
  • .align-content-xl-stretch
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-around
  • .align-content-xxl-stretch

Медиа объект

Хотите скопировать компонент мультимедийного объекта из Bootstrap 4? В мгновение ока воссоздайте его с помощью нескольких гибких утилит, которые обеспечивают еще большую гибкость и настройку, чем раньше.

PlaceholderИзображение

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

<div>
  <div>
    <img src="..." alt="...">
  </div>
  <div>
    Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать его.
  </div>
</div>

And say you want to vertically center the content next to the image:

PlaceholderИзображение

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

<div>
  <div>
    <img src="..." alt="...">
  </div>
  <div>
    Это какой-то контент из медиа-компонента. Вы можете заменить его любым содержимым и при необходимости отрегулировать его.
  </div>
</div>

Sass

API утилит

Утилиты флексбокс объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.

    "flex": (
      responsive: true,
      property: flex,
      values: (fill: 1 1 auto)
    ),
    "flex-direction": (
      responsive: true,
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-reverse
    ),
    "flex-grow": (
      responsive: true,
      property: flex-grow,
      class: flex,
      values: (
        grow-0: 0,
        grow-1: 1,
      )
    ),
    "flex-shrink": (
      responsive: true,
      property: flex-shrink,
      class: flex,
      values: (
        shrink-0: 0,
        shrink-1: 1,
      )
    ),
    "flex-wrap": (
      responsive: true,
      property: flex-wrap,
      class: flex,
      values: wrap nowrap wrap-reverse
    ),
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),
    "justify-content": (
      responsive: true,
      property: justify-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        evenly: space-evenly,
      )
    ),
    "align-items": (
      responsive: true,
      property: align-items,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "align-content": (
      responsive: true,
      property: align-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        stretch: stretch,
      )
    ),
    "align-self": (
      responsive: true,
      property: align-self,
      values: (
        auto: auto,
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "order": (
      responsive: true,
      property: order,
      values: (
        first: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        last: 6,
      ),
    ),
    

Bootstrap Бутстрап 4 Flex


Bootstrap 4 Flex

Используйте классы Flex для управления компоновкой компонентов Bootstrap 4.


Flexbox

Самая большая разница между Bootstrap 3 и Bootstrap 4 заключается в том, что BootStrap 4 теперь использует Flexbox, а не float, для обработки макета.

Модуль компоновки гибких коробок упрощает разработку гибкой адаптивной структуры макета без использования float или позиционирования. Если вы новичок в Flex, вы можете прочитать об этом в нашем CSS Flexbox учебник.

Примечание: Flexbox не поддерживается в IE9 и более ранних версиях.

Если вам нужна поддержка IE8-9, используйте Bootstrap 3. Это наиболее стабильная версия Bootstrap, и она по-прежнему поддерживается командой для критических исправлений и изменений в документации. Тем не менее, новые функции не будут добавлены к нему.

Для создания контейнера Flexbox и преобразования прямых дочерних элементов в элементы Flex используйте d-flex класс:

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

<div>
 
<div>Flex item 1</div>
  <div>Flex
item 2</div>
  <div>Flex item 3</div>
</div>

Чтобы создать встроенный контейнер Flexbox, используйте d-inline-flex класс:

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

<div>
 
<div>Flex item 1</div>
  <div>Flex
item 2</div>
  <div>Flex item 3</div>
</div>


Горизонтальное направление

Используется .flex-row для отображения элементов Flex горизонтально (бок о бок). Это значение по умолчанию.


Совет:
используйте .flex-row-reverse Выравнивание по горизонтали по правому краю:

Пример

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Пример

  Flex
item 1
  Flex item 2
 
Flex item 3

<div
class=»d-flex flex-row-reverse bg-secondary»>
  <div>Flex
item 1</div>
  <div>Flex item 2</div>
 
<div>Flex item 3</div>
</div>


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

Используется .flex-column для отображения элементов Flex вертикально (поверх друг друга) или для изменения .flex-column-reverse вертикального направления:

Пример

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Пример

  Flex
item 1
  Flex item 2
 
Flex item 3

<div
class=»d-flex flex-column-reverse»>
  <div>Flex
item 1</div>
  <div>Flex item 2</div>
 
<div>Flex item 3</div>
</div>



Выравнивание содержимого

Используйте .justify-content-* классы для изменения выравнивания элементов Flex. Допустимые классы start (по умолчанию),,, end center between или around:

Пример

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Пример

<div>…</div>
<div>…</div>
<div>…</div>
<div>…</div>
<div>…</div>


Заливка/равная ширина

Используйте .flex-fill для элементов Flex, чтобы заставить их в равной ширины:

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

<div>
  <div>Flex
item 1</div>
  <div>Flex item 2</div>
 
<div>Flex item 3</div>
</div>


Grow

Используйте для .flex-grow-1 элемента Flex, чтобы занять оставшуюся часть пространства. В приведенном ниже примере первые два элемента Flex занимают необходимое пространство, в то время как последний элемент занимает оставшуюся часть доступного пространства:

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

<div>
  <div>Flex
item 1</div>
  <div>Flex item 2</div>
 
<div>Flex item 3</div>
</div>

Совет: Используйте .flex-shrink-1 на Flex элемент, чтобы сделать его сжатие, если это необходимо.


Order

Изменение визуального порядка конкретных элементов Flex с помощью .order классов. Допустимые классы от 0 до 12, где наименьшее число имеет наивысший приоритет (Order-1 отображается перед порядком-2 и т.д.):

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

<div>
  <div>Flex
item 1</div>
  <div>Flex item 2</div>
 
<div>Flex item 3</div>
</div>


Автоматические поля

С легкостью добавляйте автоматические поля в элементы Flex .mr-auto (нажимайте элементы вправо) или с помощью .ml-auto (передвиньте элементы влево):

Пример

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Пример

  Flex
item 1
  Flex item 2
 
Flex item 3

<div>
  <div
class=»p-2 bg-info»>Flex item 1</div>
  <div>Flex
item 2</div>
  <div>Flex item
3</div>
</div>


Обернуть

Управление переносом элементов Flex в контейнер Flex с помощью .flex-nowrap (по умолчанию) .flex-wrap или .flex-wrap-reverse.

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

flex-wrap
flex-wrap-reverse
flex-nowrap

Пример

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

Flex item 16

Flex item 17

Flex item 18

Flex item 19

Flex item 20

Flex item 21

Flex item 22

Flex item 23

Flex item 24

Flex item 25

Пример

..

<div>..</div>

<div>..</div>


Выравнивание содержимого

Управление вертикальным выравниванием собранных элементов Flex с помощью .align-content-* классов. Допустимые классы .align-content-start (по умолчанию),,,, .align-content-end .align-content-center .align-content-between .align-content-around и .align-content-stretch .

Примечание: Эти классы не влияют на отдельные строки элементов Flex.

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

align-content-start
align-content-end
align-content-center
align-content-around
align-content-stretch

Example

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

Flex item 16

Flex item 17

Flex item 18

Flex item 19

Flex item 20

Flex item 21

Flex item 22

Flex item 23

Flex item 24

Flex item 25

Пример

..

<div>..</div>

<div>..</div>

<div>..</div>

<div>..</div>


Выравнивание элементов

Управление вертикальным выравниванием отдельных строк элементов Flex с помощью .align-items-* классов. Допустимые классы .align-items-start:, .align-items-end, .align-items-center .align-items-baseline и .align-items-stretch (по умолчанию).

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

align-items-start
align-items-end
align-items-center
align-items-baseline
align-items-stretch

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

..

<div>..</div>

<div>..</div>

<div>..</div>

<div>..</div>


Выравнивание себя

Управление вертикальным выравниванием заданного элемента Flex с классами .align-self-*. Допустимые классы .align-self-start:, .align-self-end, .align-self-center .align-self-baseline и .align-self-stretch (по умолчанию).

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

align-self-start
align-self-end
align-self-center
align-self-baseline
align-self-stretch

Example

Flex item 1

Flex item 2

Flex item 3

Пример

<div>
  <div
class=»p-2 border»>Flex item 1</div>
  <div>Flex item 2</div>
  <div
class=»p-2 border»>Flex item 3</div>
</div>


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

Все классы Flex оснащены дополнительными адаптивными классами, что упрощает задание определенного класса Flex для определенного размера экрана.

*символ может быть заменен SM, MD, LG или XL, который представляет малые, средние, большие или XLarge экраны.

Класс Описание
Flex Container    
.d-*-flex Создает контейнер Flexbox для различных экранов
.d-*-inline-flex Создает встроенный Flexbox контейнер для различных экранов
Direction    
.flex-*-row Отображать гибкие элементы по горизонтали на разных экранах
.flex-*-row-reverse Отображение гибких элементов по горизонтали и по правому краю на разных экранах
.flex-*-column Отображать гибкие элементы по вертикали на разных экранах
.flex-*-column-reverse Отображать гибкие элементы по вертикали, с обратным порядком, на разных экранах
Justified Content    
.justify-content-*-start Отображать элементы Flex с начала (по левому краю) на разных экранах
.justify-content-*-end Отображение элементов Flex в конце (по правому краю) на разных экранах
.justify-content-*-center Отображение элементов Flex в центре контейнера Flex на разных экранах
.justify-content-*-between Отображать гибкие элементы в «между» на разных экранах
.justify-content-*-around Отображать гибкие элементы «вокруг» на разных экранах
Fill / Equal Width    
.flex-*-fill Принудить элементы Flex к одинаковой ширине на разных экранах
Grow    
.flex-*-grow-0 Не делайте элементы растут на разных экранах  
.flex-*-grow-1 Сделать элементы растут на разных экранах  
Shrink    
.flex-*-shrink-0 Не делайте элементы термоусадочные на разные экраны  
.flex-*-shrink-1 Сжатие элементов на разных экранах  
Order    
.order-*-0-12 Изменение порядка от 0 до 12 на маленьких экранах
Wrap    
.flex-*-nowrap Не оборачивать элементы на разных экранах
.flex-*-wrap Перенос элементов на различные экраны
.flex-*-wrap-reverse Реверсировать обтекание элементов на разных экранах
Align Content    
.align-content-*-start Выравнивание собранных элементов с начала на разных экранах
.align-content-*-end Выравнивание собранных элементов в конце на разных экранах
.align-content-*-center Выравнивание собранных элементов в центре на разных экранах
.align-content-*-around Выравнивание собранных элементов «вокруг» на разных экранах
.align-content-*-stretch Растянуть собранные элементы на разных экранах
Align Items    
.align-items-*-start Выравнивание отдельных рядов элементов с начала на разных экранах
.align-items-*-end Выравнивание отдельных рядов элементов в конце на разных экранах
.align-items-*-center Выравнивание одиночных рядов элементов в центре на разных экранах
.align-items-*-baseline Выравнивание отдельных строк элементов на базовой линии на разных экранах
.align-items-*-stretch Растянуть отдельные ряды элементов на разных экранах
Align Self    
.align-self-*-start Выравнивание элемента Flex с начала на разных экранах
.align-self-*-end Выравнивание элемента Flex в конце на разных экранах
.align-self-*-center Выравнивание элемента Flex в центре на разных экранах
.align-self-*-baseline Выравнивание элемента Flex по базовой линии на разных экранах
.align-self-*-stretch Растянуть гибкий элемент на разных экранах

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

важно!вертикальный центр относительно высота родитель

если родитель элемента, который вы пытаетесь центрировать, не определен
высота,нет из вертикальных центрирующих решений будет работать!

теперь, на вертикальное центрирование в Bootstrap 4…

можно использовать flexbox & размер коммунальные услуги сделать container полный рост и display: flex. Эти варианты не требуется дополнительный CSS (за исключением высота контейнера (т. е. html,body) должна быть 100%).

1 align-self-center на Flexbox child

<div>
    <div>
     I'm vertically centered
    </div>
</div>

2 align-items-center на основе родительского элемента (.row is display:flex; flex-direction:row)

<div>
    <div>
        <div>
            <div>
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

3 justify-content-center на основе родительского элемента (.card и display:flex;flex-direction:column)

<div>
    <div>
        <div>
            <div>
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>


подробнее о вертикальном центрировании Bootstrap 4

теперь, когда Bootstrap 4 предлагает flexbox и другой коммунальные услуги, есть много подходов к вертикали
выравнивание. http://www.codeply.com/go/WG15ZWC4lf

1-Вертикальный Центр С Использованием Авто Полей:

другой способ вертикального центра-использовать my-auto. Это будет центр элемента в контейнер. Например, h-100 делает строку полной высоты, и my-auto вертикально-центр .

<div>
    <div>
        <div>Card</div>
    </div>
</div>

Вертикальный Центр С Помощью Авто Поля демо

my-auto представляет поля по вертикальной оси y и эквивалентно:

margin-top: auto;
margin-bottom: auto;

2-вертикальный центр с Flexbox:

Начиная С Bootstrap 4 .row теперь display:flex вы можете просто использовать align-self-center на любом столбце, чтобы вертикально центрировать его…

       <div>
           <div>
                <div>
                 Center
                </div>
           </div>
           <div>
                <div>
                    Taller
                </div>
          </div>
    </div>

или align-items-center на всю .row вертикально центр выровнять все col-* в строке…

       <div>
           <div>
                <div>
                 Center
                </div>
           </div>
           <div>
                <div>
                    Taller
                </div>
          </div>
    </div>

Вертикальный Центр Различной Высоты Столбцов демо


3-Вертикальный Центр С Помощью Дисплея Utils:

Bootstrap 4 имеет отображение utils это может быть использовано для display:table,display:table-cell,display:inline и т. д.. Они могут быть использованы с вертикальное выравнивание utils для выравнивания ячейки inline, inline-block или таблицы элементы.

<div>
    <div>
        <div>
            I am centered vertically
        </div>
    </div>
</div>

Вертикальный Центр С Помощью Дисплея Utils демо

примеры
вертикальное изображение центра в <div>
вертикальный центр .греби туда .контейнер
вертикальный центр и низ в <div>
вертикальный центр ребенка внутри родителя
вертикальный центр полный экран верзила


важно!я упоминал высоту?

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

body,html {
  height: 100%;
}

если вы хотите центрировать дочерний элемент внутри родительского. Родитель должен иметь определенный высота.

Смотрите также:
вертикальное выравнивание в bootstrap 4
Bootstrap 4 Центр вертикальное и горизонтальное выравнивание

html — Bootstrap 4 — Центр текста в столбце и соответствует ширине / высоте другого столбца в строке

РЕДАКТИРОВАТЬ: у меня есть jsfiddle сейчас ] (не забудьте изменить размер HTML-части влево, чтобы два блока отображались рядом)

Здравствуйте, у меня есть Box1 и Box2 бок о бок, в Box1 всегда будет меньше текста, чем в Box2, поэтому я пытаюсь сделать так, чтобы Box1 центрировал свой текст и растянул ширину / высоту бокса в соответствии с доступным пространством из-за на Box2 (справа)

<div>
  <div>
    <!-- Box1 (left) -->
    <div>
      <div style=height:100%>
        <div>
        <div>
            Box1 text 
        </div> <!-- / .row -->
        
        </div>
      </div>
    </div> <!-- /col -->
    
    <!-- Box2 (right) -->
    <div>
      <div style=height:100%>
        <div>
        <div>
          <div>
            Box 2 text ...
          </div>
        </div>
        </div>
        </div>
        </div>

Я хочу, чтобы текст Box1 был центрирован, а ширина и высота блока все равно совпадали с Box2. На изображении выше ширина и высота чувствительны и идеальны, но текст не центрирован.

Если я добавлю ‘my-auto’ к определению col в box1 следующим образом:

 <!-- Box1 (left) -->
    <div>

Он попадает туда частично, текст теперь центрирован (хорошо!), Но поле не заполняет пустое место, чтобы соответствовать Box2

Есть ли способ стилизовать мои боксы так, чтобы текст в Box1 был центрирован, а также заполнить пустое пространство в соответствии с таковым в Box2?

Спасибо

1

Martin

2 Апр 2020 в 20:04

2 ответа

Лучший ответ

Используйте классы h-100 align-items-center justify-content-center в родительском .row Box1 Text:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div>
  <div>
    <!-- Box1 (left) -->
    <div>
      <div style=height:100%>
        <div>
          <div>
            Box1 text
          </div>
          <!-- / .row -->

        </div>
      </div>
    </div>
    <!-- /col -->

    <!-- Box2 (right) -->
    <div>
      <div style=height:100%>
        <div>
          <div>
            <div>
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
              
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
              
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
              Box 2 text ... Box 2 text ...
            </div>
          </div>
        </div>
      </div>
    </div>

1

Anurag Srivastava
2 Апр 2020 в 17:21

<html>
  <head>
    <title>Example</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  </head>
  <body>
    <div>
      <div>
        <div >
          <p>Box one</p>
        </div>
        <div>
          <p>Box 2</p>
          <p>Box 2</p>
          <p>Box 2</p>
          <p>Box 2</p>
          <p>Box 2</p>
          <p>Box 2</p>
          <p>Box 2</p>
          <p>Box 2</p>
        </div>
      </div>
    </div>
  </body>
</html>

Вы можете попробовать это, чтобы выровнять ваш центр предметов Используйте эти классы в контейнере h-100 в строке h-100 align-items-center justify-content-center эти классы выровняют ваши предметы по центру

1

Habib
2 Апр 2020 в 17:48

Flex · Bootstrap

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

Включить гибкое поведение

Примените утилиты display для создания контейнера Flexbox и преобразования прямых дочерних элементов в элементы Flex. Гибкие контейнеры и элементы можно дополнительно модифицировать с помощью дополнительных свойств гибкости.

  
Я контейнер Flexbox!

Я встроенный контейнер Flexbox!

  
Я встроенный контейнер Flexbox!

Адаптивные варианты также существуют для .d-flex и .d-inline-flex .

  • .d-flex
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex

Направление

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

Используйте .flex-row , чтобы установить горизонтальное направление (по умолчанию в браузере), или .flex-row-reverse , чтобы начать горизонтальное направление с противоположной стороны.

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

  
Элемент Flex 1
Элемент Flex 2
Элемент Flex 3
Элемент Flex 1
Элемент Flex 2
Элемент Flex 3

Используйте .flex-column , чтобы задать вертикальное направление, или .flex-column-reverse , чтобы начать вертикальное направление с противоположной стороны.

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

  
Элемент Flex 1
Элемент Flex 2
Элемент Flex 3
Элемент Flex 1
Элемент Flex 2
Элемент Flex 3

Адаптивные варианты также существуют для flex-direction .

  • .flex-ряд
  • .flex-row-reverse
  • . Гибкая колонка
  • .flex-колонка-реверс
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-колонка
  • .flex-sm-колонка-реверс
  • .flex-md-row
  • .flex-md-row-reverse
  • .Flex-MD-столбец
  • .flex-md-колонка-реверс
  • .flex-lg-row
  • .flex-lg-row-обратный
  • .flex-LG-колонка
  • .flex-lg-колонка-реверс
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-колонка
  • .flex-xl-column-reverse

Обоснование содержания

Используйте утилиты justify-content в контейнерах flexbox, чтобы изменить выравнивание гибких элементов по главной оси (ось x для начала, ось y, если flex-direction: столбец ).Выберите из начало (браузер по умолчанию), конец , центр , между или около .

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
...
...
...
...
...

Варианты ответа также существуют для justify-content .

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-между
  • .justify-content-around
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-между
  • .justify-content-sm-about
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-между
  • .justify-content-md-около
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-между
  • .justify-content-lg-about
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-между
  • .justify-content-xl-around

Выровнять позиции

Используйте утилиты align-items в контейнерах flexbox, чтобы изменить выравнивание гибких элементов по поперечной оси (ось Y для начала, ось X, если flex-direction: column ). Выберите из начало , конец , центр , базовый или stretch (браузер по умолчанию).

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
...
...
...
...
...

Адаптивные варианты также существуют для align-items .

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .выровнять элементы-sm-конец
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .выровнять элементы-LG-конец
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch

Самовыравнивание

Используйте утилиты align-self для элементов Flexbox, чтобы индивидуально изменить их выравнивание по поперечной оси (ось Y для начала, ось X, если flex-direction: столбец ).Выберите один из тех же вариантов, что и align-items : start , end , center , baseline или stretch (браузер по умолчанию).

Гибкий элемент

Выровненный гибкий элемент

Гибкий элемент

Гибкий элемент

Выровненный гибкий элемент

Гибкий элемент

Гибкий элемент

Выровненный гибкий элемент

Гибкий элемент

Гибкий элемент

Выровненный гибкий элемент

Гибкий элемент

Гибкий элемент

Выровненный гибкий элемент

Гибкий элемент

  
Выровненный гибкий элемент
Выровненный гибкий элемент
Выровненный гибкий элемент
Выровненный гибкий элемент
Выровненный гибкий элемент

Адаптивные варианты также существуют для align-self .

  • .align-самозапуск
  • .align-self-end
  • .align-самоцентр
  • .align-self-baseline
  • . Выравнивание-саморастягивание
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-центр
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .выровнять-сам-мд-старт
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-конец
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .выровняйте-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch

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

Flexbox может делать довольно удивительные вещи, когда вы смешиваете выравнивание гибкости с автоматическими полями. Ниже показаны три примера управления гибкими элементами с помощью автоматических полей: по умолчанию (без автоматического поля), смещение двух элементов вправо (.mr-auto ) и сдвинув два элемента влево ( .ml-auto ).

К сожалению, IE10 и IE11 не поддерживают должным образом автоматические поля для гибких элементов, родительский элемент которых имеет нестандартное значение justify-content . См. Этот ответ StackOverflow для более подробной информации.

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex

С элементами выравнивания

Вертикально переместите один гибкий элемент вверх или вниз контейнера, смешав align-items , flex-direction: column и margin-top: auto или margin-bottom: auto .

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex

Обертка

Измените способ переноса гибких элементов в гибкий контейнер.Выберите без упаковки (по умолчанию в браузере) с .flex-nowrap , с оберткой .flex-wrap или с обратной оберткой с .flex-wrap-reverse .

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
...

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
...

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
...

Адаптивные варианты также существуют для flex-wrap .

  • .flex-nowrap
  • . Гибкая пленка
  • .flex-wrap-reverse
  • .flex-sm-nowrap
  • .flex-sm-пленка
  • .flex-sm-wrap-reverse
  • .flex-md-nowrap
  • .flex-md-wrap
  • .flex-md-wrap-reverse
  • .flex-lg-nowrap
  • .flex-lg-wrap
  • .Flex-LG-Wrap-Реверс
  • .flex-xl-nowrap
  • .flex-xl-wrap
  • .flex-xl-wrap-reverse

Заказать

Измените порядок определенных гибких элементов visual с помощью нескольких утилит порядка порядка . Мы предоставляем только варианты создания элемента первым или последним, а также сброс для использования порядка DOM. Поскольку заказ принимает любое целочисленное значение (например, 5 ), добавьте собственный CSS для любых необходимых дополнительных значений.

Первый элемент гибкости

Второй гибкий элемент

Третий гибкий элемент

  
Первый гибкий элемент
Второй гибкий элемент
Третий гибкий элемент

Адаптивные варианты также существуют для заказа .

  • . Заказ-0
  • . Заказ-1
  • . Заказ-2
  • . Заказ-3
  • .заказ-4
  • . Заказ-5
  • . Заказ-6
  • . Заказ-7
  • . Заказ-8
  • . Заказ-9
  • . Заказ-10
  • . Заказ-11
  • . Заказ-12
  • . Заказ-см-0
  • . Заказ-см-1
  • . Заказ-см-2
  • . Заказ-см-3
  • .заказ-см-4
  • . Заказ-см-5
  • . Заказ-см-6
  • . Заказ-sm-7
  • . Заказ-см-8
  • . Заказ-см-9
  • . Заказ-см-10
  • . Заказ-см-11
  • . Заказ-см-12
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .заказ-md-3
  • .order-md-4
  • .order-md-5
  • .order-md-6
  • .order-md-7
  • .order-md-8
  • . Заказ-md-9
  • .order-md-10
  • .order-md-11
  • .order-md-12
  • .order-lg-0
  • .order-lg-1
  • .заказ-LG-2
  • . Заказ-LG-3
  • . Заказ-LG-4
  • .order-lg-5
  • . Заказ-LG-6
  • .order-lg-7
  • . Заказ-LG-8
  • .order-lg-9
  • .order-lg-10
  • .order-lg-11
  • .order-lg-12
  • .order-XL-0
  • .заказ-XL-1
  • .order-XL-2
  • .order-XL-3
  • .order-XL-4
  • .order-XL-5
  • .order-XL-6
  • .order-XL-7
  • . Заказ-XL-8
  • . Заказ-XL-9
  • .order-XL-10
  • .order-XL-11
  • .order-XL-12

Выровнять содержание

Используйте утилиты align-content на контейнерах flexbox для выравнивания гибких элементов вместе на поперечной оси.Выберите из начало (по умолчанию браузер), конец , центр , между , около или растяжение . Чтобы продемонстрировать эти утилиты, мы ввели flex-wrap: wrap и увеличили количество гибких элементов.

Внимание! Это свойство не влияет на отдельные строки гибких элементов.

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
...

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
...

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
...

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
...

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
...

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
...

Адаптивные варианты также существуют для align-content .

  • .align-content-start
  • .align-content-end
  • .align-контент-центр
  • .align-content-около
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-около
  • .выровнять контент-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-около
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-около
  • .выровнять контент-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-около
  • .align-content-xl-stretch

Flex · Bootstrap v4.5

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

Включить гибкое поведение

Примените утилиты display для создания контейнера Flexbox и преобразования прямых дочерних элементов в элементы Flex. Гибкие контейнеры и элементы можно дополнительно модифицировать с помощью дополнительных свойств гибкости.

  
Я контейнер Flexbox!

Я встроенный контейнер Flexbox!

  
Я - встроенный контейнер flexbox!

Для также существуют адаптивные варианты.d-flex и . d-inline-flex .

  • .d-flex
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex

Направление

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

Используйте .flex-row , чтобы установить горизонтальное направление (по умолчанию в браузере), или .flex-row-reverse , чтобы начать горизонтальное направление с противоположной стороны.

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

  
Элемент Flex 1
Элемент Flex 2
Элемент Flex 3
Элемент Flex 1
Элемент Flex 2
Элемент Flex 3

Используйте .flex-column , чтобы задать вертикальное направление, или .flex-column-reverse , чтобы начать вертикальное направление с противоположной стороны.

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

Гибкий элемент 1

Гибкий элемент 2

Элемент гибкости 3

  
Элемент Flex 1
Элемент Flex 2
Элемент Flex 3
Элемент Flex 1
Элемент Flex 2
Элемент Flex 3

Адаптивные варианты также существуют для flex-direction .

  • .flex-ряд
  • .flex-row-reverse
  • . Гибкая колонка
  • .flex-колонка-реверс
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-колонка
  • .flex-sm-колонка-реверс
  • .flex-md-row
  • .flex-md-row-reverse
  • .Flex-MD-столбец
  • .flex-md-колонка-реверс
  • .flex-lg-row
  • .flex-lg-row-обратный
  • .flex-LG-колонка
  • .flex-lg-колонка-реверс
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-колонка
  • .flex-xl-column-reverse

Обоснование содержания

Используйте утилиты justify-content в контейнерах flexbox, чтобы изменить выравнивание гибких элементов по главной оси (ось x для начала, ось y, если flex-direction: столбец ).Выберите из начало (браузер по умолчанию), конец , центр , между или около .

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
...
...
...
...
...

Варианты ответа также существуют для justify-content .

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-между
  • .justify-content-around
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-между
  • .justify-content-sm-about
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-между
  • .justify-content-md-около
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-между
  • .justify-content-lg-about
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-между
  • .justify-content-xl-around

Выровнять позиции

Используйте утилиты align-items в контейнерах flexbox, чтобы изменить выравнивание гибких элементов по поперечной оси (ось Y для начала, ось X, если flex-direction: column ). Выберите из начало , конец , центр , базовый или stretch (браузер по умолчанию).

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
...
...
...
...
...

Адаптивные варианты также существуют для align-items .

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .выровнять элементы-sm-конец
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .выровнять элементы-LG-конец
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch

Самовыравнивание

Используйте утилиты align-self для элементов Flexbox, чтобы индивидуально изменить их выравнивание по поперечной оси (ось Y для начала, ось X, если flex-direction: столбец ).Выберите один из тех же вариантов, что и align-items : start , end , center , baseline или stretch (браузер по умолчанию).

Гибкий элемент

Выровненный гибкий элемент

Гибкий элемент

Гибкий элемент

Выровненный гибкий элемент

Гибкий элемент

Гибкий элемент

Выровненный гибкий элемент

Гибкий элемент

Гибкий элемент

Выровненный гибкий элемент

Гибкий элемент

Гибкий элемент

Выровненный гибкий элемент

Гибкий элемент

  
Выровненный гибкий элемент
Выровненный гибкий элемент
Выровненный гибкий элемент
Выровненный гибкий элемент
Выровненный гибкий элемент

Адаптивные варианты также существуют для align-self .

  • .align-самозапуск
  • .align-self-end
  • .align-самоцентр
  • .align-self-baseline
  • . Выравнивание-саморастягивание
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-центр
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .выровнять-сам-мд-старт
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-конец
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .выровняйте-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch

Заливка

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

Flex элемент с большим количеством контента

Гибкий элемент

Гибкий элемент

  
Гибкий элемент с большим количеством контента
Элемент Flex
Элемент Flex

Адаптивные варианты также существуют для flex-fill .

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .Flex-LG-заполнение
  • .flex-xl-fill

Расти и сжимайся

Используйте утилиты .flex-grow- * для переключения способности гибкого элемента увеличиваться до заполнения доступного пространства. В приведенном ниже примере элементы .flex-grow-1 используют все доступное пространство, в то время как оставшимся двум гибким элементам предоставляется необходимое пространство.

Гибкий элемент

Гибкий элемент

Третий гибкий элемент

  
Элемент Flex
Элемент Flex
Третий гибкий элемент

Используйте .flex-shrink- * для переключения способности гибкого элемента сжиматься при необходимости. В приведенном ниже примере второй гибкий элемент с .flex-shrink-1 принудительно переносит свое содержимое в новую строку, «сжимаясь», чтобы освободить место для предыдущего гибкого элемента с .w-100 .

  
Элемент Flex
Элемент Flex

Адаптивные варианты также существуют для flex-grow и flex-shrink .

  • .flex- {grow | shrink} -0
  • .flex- {grow | shrink} -1
  • .flex-sm- {grow | shrink} -0
  • .flex-sm- {grow | shrink} -1
  • .flex-md- {grow | shrink} -0
  • .flex-md- {grow | shrink} -1
  • .flex-lg- {grow | shrink} -0
  • .flex-lg- {grow | shrink} -1
  • .flex-xl- {grow | shrink} -0
  • .flex-xl- {grow | shrink} -1

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

Flexbox может делать довольно удивительные вещи, когда вы смешиваете выравнивание гибкости с автоматическими полями. Ниже показаны три примера управления гибкими элементами через автоматические поля: по умолчанию (без автоматического поля), перемещение двух элементов вправо ( .mr-auto ) и перемещение двух элементов влево ( .ml-auto ) .

К сожалению, IE10 и IE11 не поддерживают должным образом автоматические поля для гибких элементов, родительский элемент которых имеет нестандартное значение justify-content . См. Этот ответ StackOverflow для более подробной информации.

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex

С элементами выравнивания

Вертикально переместите один гибкий элемент вверх или вниз контейнера, смешав align-items , flex-direction: column и margin-top: auto или margin-bottom: auto .

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex
Элемент Flex

Обертка

Измените способ переноса гибких элементов в гибкий контейнер.Выберите без упаковки (по умолчанию в браузере) с .flex-nowrap , с оберткой .flex-wrap или с обратной оберткой с .flex-wrap-reverse .

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
...

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
...

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
...

Адаптивные варианты также существуют для flex-wrap .

  • .flex-nowrap
  • . Гибкая пленка
  • .flex-wrap-reverse
  • .flex-sm-nowrap
  • .flex-sm-пленка
  • .flex-sm-wrap-reverse
  • .flex-md-nowrap
  • .flex-md-wrap
  • .flex-md-wrap-reverse
  • .flex-lg-nowrap
  • .flex-lg-wrap
  • .Flex-LG-Wrap-Реверс
  • .flex-xl-nowrap
  • .flex-xl-wrap
  • .flex-xl-wrap-reverse

Заказать

Измените порядок определенных гибких элементов visual с помощью нескольких утилит порядка порядка . Мы предоставляем только варианты создания элемента первым или последним, а также сброс для использования порядка DOM. Поскольку заказ принимает любое целочисленное значение (например, 5 ), добавьте собственный CSS для любых необходимых дополнительных значений.

Первый элемент гибкости

Второй гибкий элемент

Третий гибкий элемент

  
Первый гибкий элемент
Второй гибкий элемент
Третий гибкий элемент

Адаптивные варианты также существуют для заказа .

  • . Заказ-0
  • . Заказ-1
  • . Заказ-2
  • . Заказ-3
  • .заказ-4
  • . Заказ-5
  • . Заказ-6
  • . Заказ-7
  • . Заказ-8
  • . Заказ-9
  • . Заказ-10
  • . Заказ-11
  • . Заказ-12
  • . Заказ-см-0
  • . Заказ-см-1
  • . Заказ-см-2
  • . Заказ-см-3
  • .заказ-см-4
  • . Заказ-см-5
  • . Заказ-см-6
  • . Заказ-sm-7
  • . Заказ-см-8
  • . Заказ-см-9
  • . Заказ-см-10
  • . Заказ-см-11
  • . Заказ-см-12
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .заказ-md-3
  • .order-md-4
  • .order-md-5
  • .order-md-6
  • .order-md-7
  • .order-md-8
  • . Заказ-md-9
  • .order-md-10
  • .order-md-11
  • .order-md-12
  • .order-lg-0
  • .order-lg-1
  • .заказ-LG-2
  • . Заказ-LG-3
  • . Заказ-LG-4
  • .order-lg-5
  • . Заказ-LG-6
  • .order-lg-7
  • . Заказ-LG-8
  • .order-lg-9
  • .order-lg-10
  • .order-lg-11
  • .order-lg-12
  • .order-XL-0
  • .заказ-XL-1
  • .order-XL-2
  • .order-XL-3
  • .order-XL-4
  • .order-XL-5
  • .order-XL-6
  • .order-XL-7
  • . Заказ-XL-8
  • . Заказ-XL-9
  • .order-XL-10
  • .order-XL-11
  • .order-XL-12

Выровнять содержание

Используйте утилиты align-content на контейнерах flexbox для выравнивания гибких элементов вместе на поперечной оси.Выберите из начало (по умолчанию браузер), конец , центр , между , около или растяжение . Чтобы продемонстрировать эти утилиты, мы ввели flex-wrap: wrap и увеличили количество гибких элементов.

Внимание! Это свойство не влияет на отдельные строки гибких элементов.

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
...

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
...

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
...

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
...

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
...

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

Гибкий элемент

  
...

Адаптивные варианты также существуют для align-content .

  • .align-content-start
  • .align-content-end
  • .align-контент-центр
  • .align-content-около
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-около
  • .выровнять контент-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-около
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-около
  • .выровнять контент-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-около
  • .align-content-xl-stretch

Bootstrap 4 по центру (горизонтальное выравнивание)

Компиляция и настройка

Чтобы еще больше уменьшить вес пакета MDBootstrap, вы можете скомпилировать свой собственный пакет, содержащий только
эти компоненты и
функции, которые вам нужны.

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

Руководство по компиляции и настройке

Карта зависимостей файлов SCSS в MDBootstrap:

 
    Легенда:

    '->' означает 'требуется'

    Все бесплатные и профессиональные файлы требуют файлов из каталога 'core'

    'none' означает 'этот компонент не требует ничего, кроме файлов ядра'

    Файл, завернутый в ``, означает, что этот файл делает базовый компонент красивее, но это не обязательно для правильной работы.

    Все компоненты PRO требуют 'pro / _variables.scss 'файл

    scss /
    |
    | - ядро ​​/
    | |
    | | - бутстрап /
    | | | - _functions.scss
    | | | - _variables.scss
    | |
    | | - _colors.scss
    | | - _global.scss
    | | - _helpers.scss
    | | - _masks.scss
    | | - _mixins.scss
    | | - _typography.scss
    | | - _variables.scss
    | | - _waves.scss
    |
    | - бесплатно /
    | | - _animations-basic.scss -> нет
    | | - _animations-extended.scss -> _animations-basic.scss
    | | - _buttons.scss -> нет
    | | - _cards.scss -> нет
    | | - _dropdowns.scss -> нет
    | | - _input-group.scss -> _forms.scss, _buttons.scss, _dropdowns.scss
    | | - _navbars.scss -> нет
    | | - _pagination.scss -> нет
    | | - _badges.scss -> нет
    | | - _modals.scss -> _buttons.scss, _forms.scss (PRO -> _tabs.scss)
    | | - _carousels.scss ->
    | | - _forms.scss -> нет
    | | - _msc.scss -> нет
    | | - _footers.scss нет (PRO :)
    | | - _list-group.scss -> нет
    | | - _tables.scss -> нет (PRO: _material-select.scss, pro / _forms.scss, _checkbox.scss, pro / _buttons.scss, pro / _cards.scss, _pagination.scss, pro / _msc.scss )
    | | - _depreciated.scss
    |
    | - pro /
    | |
    | | - сборщик /
    | | | - _default.scss -> нет
    | | | - _default-time.scss -> _default.scss, free / _forms.scss, free / _buttons.scss, pro / _buttons.scss, free / _cards.scss
    | | | - _default-date.scss -> _default.scss, бесплатно / _forms.scss
    | |
    | | - разделы /
    | | | - _templates.scss -> _sidenav.scss
    | | | - _social.scss -> бесплатно / _cards.scss, бесплатно / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss,
    | | | - _team.scss -> бесплатно / _buttons.scss, pro / _buttons.scss, free / _cards.scss, pro / _cards.scss
    | | | - _testimonials.scss -> бесплатно / _carousels.scss, pro / _carousels.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _magazine.scss -> _badges.scss
    | | | - _pricing.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _contacts.scss -> бесплатно / _forms.scss, pro / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | |
    | | - _variables.scss
    | | - _buttons.scss -> бесплатно / _buttons.scss, pro / _msc.scss, _checkbox.scss, _radio.scss
    | | - _social-buttons.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | - _tabs.scss -> _cards.scss
    | | - _cards.scss -> бесплатно / _cards.scss
    | | - _dropdowns.scss -> бесплатно / _dropdowns.scss, бесплатно / _buttons.scss
    | | - _navbars.scss -> бесплатно / _navbars.scss (PRO :)
    | | - _scrollspy.scss -> нет
    | | - _lightbox.scss -> нет
    | | - _chips.scss -> нет
    | | - _msc.scss -> нет
    | | - _forms.scss -> нет
    | | - _radio.scss -> нет
    | | - _checkbox.scss -> нет
    | | - _material-select.scss -> нет
    | | - _switch.scss -> нет
    | | - _file-input.scss -> бесплатно / _forms.scss, бесплатно / _buttons.scss
    | | - _range.scss -> нет
    | | - _input-group.scss -> free / _input-group.scss и то же, что и свободная группа ввода, _checkbox.scss, _radio.scss
    | | - _autocomplete.scss -> бесплатно / _forms.scss
    | | - _accordion.scss -> pro / _animations.scss, бесплатно / _cards.scss
    | | - _parallax.scss -> нет
    | | - _sidenav.scss -> бесплатно / _forms.scss, pro / _animations.scss, разделы / _templates.scss
    | | - _ecommerce.scss -> бесплатно / _cards.scss, pro / _cards.scss, бесплатно / _buttons.scss, pro / _buttons.scss, pro / _msc.scss
    | | - _carousels.scss -> бесплатно / _carousels.scss, бесплатно / _cards.scss, бесплатно / _buttons.scss
    | | - _steppers.scss -> бесплатно / _buttons.scss
    | | - _blog.scss -> нет
    | | - _toasts.scss -> бесплатно / _buttons.scss
    | | - _animations.scss -> нет
    | | - _charts.scss -> нет
    | | - _progress.scss -> нет
    | | - _scrollbar.scss -> нет
    | | - _skins.scss -> нет
    | | - _устарело.scss
    |
    `- _custom-skin.scss
    `- _custom-styles.scss
    `- _custom-variables.scss
    `- mdb.scss

    

Карта зависимостей модулей JavaScript в MDBootstrap:

 
    Легенда:

    '->' означает 'требуется'

    Все файлы требуют jQuery и bootstrap.js

    js /
    ├── dist /
    │ ├── buttons.js
    │ ├── cards.js
    │ ├── character-counter.js
    │ ├── Chips.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── раскрывающийся список.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src /
    │ ├── buttons.js
    │ ├── карты.js
    │ ├── character-counter.js
    │ ├── Chips.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── dropdown.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    └── продавец /
        ├── аддоны /
        │ ├── datatables.js
        │ └── datatables.min.js
        ├── chart.js
        ├── extended-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js -> vendor / jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js -> vendor / hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js -> vendor / picker.js
        ├── picker.js
        ├── picker-time.js -> vendor / picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js
    

Как центрировать столбец в Bootstrap

Тема: Bootstrap / SassPrev | След.

Ответ: Используйте

mx-auto Class

Если вы используете версию Bootstrap 4 , вы можете центрировать столбец сетки по горизонтали, применив класс .mx-auto на нем. Давайте попробуем следующий пример, чтобы увидеть, как это работает:

  

В качестве альтернативы вы также можете применить класс .justify-content-center к элементу .row , чтобы центрировать столбец по горизонтали. Давайте посмотрим на следующий пример:

  

Но в Bootstrap 3 все немного по-другому.Если номер столбца сетки четный (например, 2, 4, 6, 8, 10, 12), вы можете использовать класс .col- {xs | sm | md | lg} -offset- * для выравнивания столбца в центр, вот так:

  

Однако, если номер столбца сетки нечетный (например, 1, 3, 5, 7, 9, 11), вы должны использовать некоторый собственный CSS.Давайте посмотрим на следующий пример, чтобы понять, как это в основном работает:

  / * код CSS * /
.col-centered {
    float: нет;
    маржа: 0 авто;
}
 


Вопросы и ответы по теме

Вот еще несколько часто задаваемых вопросов по этой теме:

8 Примеры выравнивания текста в Bootstrap 4: по центру, справа и др.

Bootstrap 4 имеет встроенные классы для работы с выравниванием текста как по центру, справа и слева, а также с весом текста (полужирным шрифтом), переносом, переполнением, преобразованием и курсивом.

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

Пример текста центра начальной загрузки

Чтобы выровнять текст по центру, используйте класс .text-center . В следующем примере этот класс применяется к абзацу и заголовкам от h2 до h6, чтобы текст был выровнен по центру:

См. Онлайн-демонстрацию и код

В разметке:

Класс text-center для выравнивания текста по центру в абзаце!

Выровнять текст по центру в заголовке 1!

Выровнять текст по центру в заголовке 2 !

Выровнять текст в заголовке 3!

Выровнять текст в заголовке 4!

Выровнять текст в заголовке 5!

Центрировать текст в заголовке 6!

Пример выравнивания текста по правому краю

Для выравнивания текста по правому краю используйте .text-right класс в элементе. Как и в приведенном выше примере, я применил класс .text-right к абзацу и заголовки h2 к h6 для демонстрации:

См. Онлайн-демонстрацию и код

Пример кода для выравнивания по правому краю

Выровнять по правому краю по классу текста по правому краю в абзаце

Выровнять по правому краю по h2!

Выровнять по правому краю по h3!

Выровнять вправо в h2!

Выровнять вправо в h2!

Выровнять вправо в h2!

Выровнять по правому краю в h2!

Пример использования класса text-left

Аналогичным образом вы можете использовать .text-left класс для выравнивания текста по левому краю. Это поведение по умолчанию, применяемое в тексте. Чтобы показать разницу, я использовал абзацы и заголовки с классом .text-left и без него.

Посмотрите на вывод и код, посетив демонстрационную страницу:

См. Онлайн-демонстрацию и код

Разметка для использования класса text-left:

Выровнять по левому краю по классу текста по левому краю в абзаце

Выровнять по левому краю по h2!

Выровнять по левому краю по h3!

Выровнять по левому краю в h2!

Выровнять по левому краю по h2!

Выровнять по левому краю по h2!

Выровнять по левому краю в h2!

Выравнивание текста с окнами просмотра

Если вы хотите, чтобы текст был выровнен по центру или по правому краю для больших или маленьких устройств, в частности, в соответствии с окнами просмотра, используйте свойство text-align, как описано ниже с примерами. ВНИМАНИЕ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Для выравнивания текста по центру только на больших устройствах используйте класс text-lg-center . Чтобы проверить это, скопируйте код со страницы примера в вашем редакторе и запустите код. Теперь посмотрите на размер экрана > = 1200px и в маленьком размере, чтобы увидеть, как он меняет свое выравнивание:

См. Онлайн-демонстрацию и код

Код:

Демонстрация выравнивания текста в Bootstrap 4

Выровнен по центру в большом окне просмотра и слева в маленьких окнах просмотра

h2: по центру на большом экране и слева в среднем / меньшем

h5: по центру на большом экране и по центру в среднем / меньшем

h5: по центру на большом экране и по центру в среднем / меньшем

h6: по центру на большом экране и по центру в среднем / меньшем

Выровнять центр только в средних и больших видовых экранах

Для выравнивания текста по центру только в средних и больших видовых экранах и выравнивания по левому краю в малых видовых экранах используйте .text-md-center в таких элементах, как

,

,

и т. д.

Посмотрите на использование и попробуйте с различными размерами экрана:

См. Онлайн-демонстрацию и код

Код:

Демонстрация класса text-md-center

Выровненный центр в средних / больших окнах просмотра и слева в маленьких окнах просмотра

h2: по центру на среднем / большом экране и слева на меньшем

h5: по центру на среднем / большом экране и по центру на меньшем

h5: по центру на среднем / большом экране и по центру на меньшем

h6: по центру на среднем / большом экране и по центру на меньшем

Демонстрация класса text-sm-center

Для выравнивания текста по центру на всех устройствах / вьюпортах, кроме очень малых (менее 576 пикселей), используйте класс text-sm-center .Демо-код показан ниже:

См. Онлайн-демонстрацию и код

Код, который стоит попробовать:

Демонстрация класса text-sm-center

Выровнять центр в малых / средних / больших окнах просмотра, кроме очень маленьких

h2: по центру маленький / средний / большой, кроме очень маленького

h5: по центру малый / средний / большой, кроме очень маленького

h5: по центру маленький / средний / большой, кроме очень маленького

h6: по центру маленький / средний / большой, кроме очень маленького

Использование классов текстовой сетки для выравнивания по правому и левому краю

Точно так же Bootstrap 4 имеет встроенные классы для выравнивания по правому или левому краю (в частности) для различных экранов / видовых экранов.Доступны следующие классы:

Для выравнивания по правому краю:

  • текст-см-право
  • текст-MD-вправо
  • текст-LG-справа

Для выравнивания по левому краю:

  • текст-см-слева
  • текст-MD-слева
  • текст-LG-левый

Централизованное выравнивание изображения по классу text-center

Вы можете использовать не только .text-center или другие классы текста для выравнивания текста, но и изображений.В следующем примере два изображения выравниваются по правому краю и по центру с использованием классов выравнивания текста Bootstrap 4 следующим образом:

См. Онлайн-демонстрацию и код

Разметка для изображений с выравниванием по правому краю и по центру по классам текста:

Изображение с выравниванием по центру

 Изображение с выравниванием по правому краю

Выравнивание изображений по классам плавания

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

См. Онлайн-демонстрацию и код

Пример кода:

Пример выравнивания изображений

 Выровнено по левому краю

 Выровнено по правому краю

Посмотрите результат и получите полный код с демонстрационной страницы.

Кнопки выравнивания по левому краю, выравнивания по правому краю и выравнивания по центру с помощью Bootstrap

Из этого руководства вы узнаете, как выравнивать по левому краю, по правому краю и по центру кнопки с помощью Bootstrap. Короткий ответ: сначала оберните кнопки внутри элемента

и используйте классы Bootstrap, приведенные ниже, для выравнивания кнопок: —

  • .text-left : чтобы выровнять левую позицию кнопки в Bootstrap.
  • .text-right : Может использоваться для выравнивания кнопки по правому краю.
  • .text-center : для выравнивания положения кнопки по центру.

Давайте узнаем, как использовать эти классы для выравнивания кнопок с примерами, приведенными ниже .

Как выровнять кнопку по левому краю с помощью Bootstrap

Чтобы выровнять кнопку по левому краю с помощью Bootstrap, вы должны сначала обернуть кнопку внутри

и использовать класс Bootstrap .text-left , как показано ниже.

Проверить это вживую