Bootstrap center: File not found · Bootstrap v5.0 — Программирование на Python и Objective-C в Mac OS

Содержание

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 элемент

<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 элемент

<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 элемент

<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 элемент

<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 элемент

<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 элемент

<div>
  . ..
</div>

Flex элемент

<div>
  ...
</div>

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 элемент

<div>
  ...
</div>

Flex элемент

<div>...</div>

Flex элемент

<div>...</div>

Flex элемент

<div>...</div>

Flex элемент

<div>...</div>

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…

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

Свойство 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

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

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>

https://www.codeply.com/go/raCutAGHre

высота контейнера с пунктом (пунктами) по центру должна составлять 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

Пример

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

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

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

Используется .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

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

Используется .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

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

Используйте .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

Пример

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

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

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

Grow

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

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

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

Order

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

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

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

С легкостью добавляйте автоматические поля в элементы 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

Обернуть

Управление переносом элементов 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>

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

Управление вертикальным выравниванием собранных элементов 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>

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

Управление вертикальным выравниванием отдельных строк элементов 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>

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

Управление вертикальным выравниванием заданного элемента 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

Пример

Адаптивные классы 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>

https://www.codeply.com/go/fFqaDe5Oey

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

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

https://www.codeply.com/go/BumdFnmLuk

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

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

https://www.codeply.com/go/3gySSEe7nd

подробнее о вертикальном центрировании 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?

Спасибо

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>

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 эти классы выровняют ваши предметы по центру

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.

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

   Я контейнер 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

Гибкий элемент 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 .

.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 .

.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 .

.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 ) .

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

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



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



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

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

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

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



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

Обертка

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

...

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

...

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

...

Адаптивные варианты также существуют для 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

Заказать

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

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

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

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

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

. Заказ-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 .

.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!

Пример использования класса text-left

Аналогичным образом вы можете использовать .text-left класс для выравнивания текста по левому краю. Это поведение по умолчанию, применяемое в тексте. Чтобы показать разницу, я использовал абзацы и заголовки с классом .text-left и без него.

Посмотрите на вывод и код, посетив демонстрационную страницу:

См. Онлайн-демонстрацию и код

Разметка для использования класса text-left:

Выровнять по левому краю по классу текста по левому краю в абзаце

Выровнять по левому краю по h2!

Выровнять по левому краю по h3!

Выровнять по левому краю в h2!

Выровнять по левому краю по h2!

Выровнять по левому краю в h2!

Выравнивание текста с окнами просмотра

Если вы хотите, чтобы текст был выровнен по центру или по правому краю для больших или маленьких устройств, в частности, в соответствии с окнами просмотра, используйте свойство text-align, как описано ниже с примерами. ВНИМАНИЕ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Для выравнивания текста по центру только на больших устройствах используйте класс text-lg-center . Чтобы проверить это, скопируйте код со страницы примера в вашем редакторе и запустите код. Теперь посмотрите на размер экрана > = 1200px и в маленьком размере, чтобы увидеть, как он меняет свое выравнивание:

См. Онлайн-демонстрацию и код

Код:

Демонстрация выравнивания текста в Bootstrap 4

Выровнен по центру в большом окне просмотра и слева в маленьких окнах просмотра

h2: по центру на большом экране и слева в среднем / меньшем

h5: по центру на большом экране и по центру в среднем / меньшем

h6: по центру на большом экране и по центру в среднем / меньшем

Выровнять центр только в средних и больших видовых экранах

Для выравнивания текста по центру только в средних и больших видовых экранах и выравнивания по левому краю в малых видовых экранах используйте .text-md-center в таких элементах, как

,

и т. д.

Посмотрите на использование и попробуйте с различными размерами экрана:

См. Онлайн-демонстрацию и код

Код:

Демонстрация класса text-md-center

Выровненный центр в средних / больших окнах просмотра и слева в маленьких окнах просмотра

h2: по центру на среднем / большом экране и слева на меньшем

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 , как показано ниже.
Проверить это вживую

и использовать класс .text-right , как указано ниже.
Проверить это вживую

и использовать .text-center , как показано ниже.
Проверить это вживую

Вышеупомянутый метод никому не рекомендуется для выравнивания кнопок, если они не находятся в одной строке. Если кнопки находятся в разных строках и вы используете два вышеуказанных класса, кнопка может перекрываться с другими элементами.
и использовать класс Bootstrap .text-left , чтобы выровнять кнопку слева в Bootstrap.
2. Как выровнять кнопку?
Ответ : Чтобы выровнять кнопку, вы должны поместить ее внутри элемента
. После этого добавьте класс Bootstrap к элементу
, например .text-left для выравнивания по левому краю, .text-right для выравнивания по правому краю и .text-center для выравнивания по центру.
3. Как выровнять кнопку по правому краю в начальной загрузке?
Ответ : Сначала поместите кнопку внутри элемента
.После этого добавьте элемент Bootstrap class .text-right в
, чтобы выровнять кнопку в правильном положении в Bootstrap.
4. Как выровнять кнопку по центру в начальной загрузке 4?
Ответ : Чтобы выровнять кнопку по центру, поместите кнопку внутри элемента
и используйте элемент Bootstrap class .text-center от до
, чтобы выровнять кнопку по центру, выровняйте кнопку в Bootstrap.
Заключение
Не используйте вытягивание вправо и влево для выравнивания кнопок, если они не находятся на одной линии. Если вы используете класс .pull-right или .pull-left с кнопками не в одной строке, вы используете неправильные классы Bootstrap для выравнивания кнопок. Потому что эти классы могут нарушить ваш дизайн, а ваши кнопки могут перекрываться с другими элементами HTML.
Итак, , я рекомендую вам всегда использовать классы Bootstrap .text-left , .text-right и .text-center , чтобы выровнять кнопку в требуемых положениях, когда они не находятся в одной строке. .
Похожие сообщения
Похожие сообщения
Bootstrap 4 Flex
Бутстрап 4 Flex
Используйте классы гибкости для управления компоновкой компонентов Bootstrap 4.
Flexbox
Самая большая разница между Bootstrap 3 и Bootstrap 4 заключается в том, что Bootstrap 4 теперь использует flexbox вместо float для обработки макета.
Модуль Flexible Box Layout упрощает разработку гибкой адаптивной структуры макета без использования float или позиционирования.Если вы новичок в Flex, вы можете прочитать об этом в нашем руководстве по CSS Flexbox.
Примечание. Flexbox не поддерживается в IE9 и более ранних версиях.
Если вам требуется поддержка IE8-9, используйте Bootstrap 3. Это самый
стабильная версия Bootstrap, и она по-прежнему поддерживается командой для исправления критических ошибок и изменений документации. Однако в
Это.
Чтобы создать контейнер flexbox и преобразовать прямые дочерние элементы в гибкие элементы, используйте класс d-flex :
Пример
Гибкий элемент 1
Гибкий элемент 2
Элемент гибкости 3
Пример
Элемент Flex 1
Flex
элемент 2
Элемент Flex 3
Попробуй сам »
Чтобы создать встроенный контейнер flexbox, используйте класс d-inline-flex :
Пример
Гибкий элемент 1
Гибкий элемент 2
Элемент гибкости 3
Пример
Элемент Flex 1
Flex
элемент 2
Элемент Flex 3
Попробуй сам »
Горизонтальное направление
Используйте .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
Попробуй сам »
Обосновать содержание
Используйте .justify-content- * для изменения выравнивания гибких элементов. Допустимые классы: начало (по умолчанию), конец , центр , между или около :
Пример
Гибкий элемент 1
Гибкий элемент 2
Элемент гибкости 3
Гибкий элемент 1
Гибкий элемент 2
Элемент гибкости 3
Гибкий элемент 1
Гибкий элемент 2
Элемент гибкости 3
Гибкий элемент 1
Гибкий элемент 2
Элемент гибкости 3
Гибкий элемент 1
Гибкий элемент 2
Элемент гибкости 3
Пример
…
…
…
…
…
Попробуй сам »
Заполнение / равная ширина
Используйте .flex-fill на гибких элементах, чтобы заставить их иметь одинаковую ширину:
Пример
Гибкий элемент 1
Гибкий элемент 2
Элемент гибкости 3
Пример
Flex
элемент 1
Элемент Flex 2
Элемент Flex 3
Попробуй сам »
Рост
Используйте .flex-grow-1 на гибком элементе, чтобы занять остальное пространство. В приведенном ниже примере первые два гибких элемента занимают необходимое пространство, а последний элемент занимает остальное доступное пространство:
Пример
Гибкий элемент 1
Гибкий элемент 2
Элемент гибкости 3
Пример
Flex
элемент 1
Элемент Flex 2
Элемент Flex 3
Попробуй сам »
Совет: Используйте .flex-shrink-1 на гибком элементе, чтобы он при необходимости сжался.
Заказать
Измените визуальный порядок определенных гибких элементов с помощью классов .order . Допустимые классы от 0 до 12, где наименьшее число имеет наивысший приоритет (порядок-1 отображается перед порядком-2 и т. Д.):
Пример
Гибкий элемент 1
Гибкий элемент 2
Элемент гибкости 3
Пример
Flex
элемент 1
Элемент Flex 2
Элемент Flex 3
Попробуй сам »
Автоматическая маржа
Легко добавляйте автоматические поля к гибким элементам с помощью .mr-auto (смещение элементов вправо) или с помощью .ml-auto (смещение элементов влево):
Пример
Гибкий элемент 1
Гибкий элемент 2
Элемент гибкости 3
Гибкий элемент 1
Гибкий элемент 2
Элемент гибкости 3
Пример
Flex
элемент 1
Flex элемент 2
Элемент Flex 3
Элемент Flex 1
Flex
элемент 2
Элемент Flex
3
Попробуй сам »
Обертка
Управляйте упаковкой гибких элементов в гибкий контейнер с помощью .flex-nowrap (по умолчанию), .flex-wrap или .flex-wrap-reverse .
Нажмите кнопки ниже, чтобы увидеть разницу между тремя классами,
изменив упаковку гибких элементов в поле примера:
гибкая пленка
Flex-Wrap-Обратный
Flex-Nowrap
Пример
Гибкий элемент 1
Гибкий элемент 2
Элемент гибкости 3
Гибкий элемент 4
Гибкий элемент 5
Гибкий элемент 6
Гибкий элемент 7
Гибкий элемент 8
Гибкий элемент 9
Гибкий элемент 10
Элемент гибкости 11
Гибкий элемент 12
Элемент гибкости 13
Гибкий элемент 14
Гибкий элемент 15
Элемент гибкости 16
Элемент гибкости 17
Гибкий элемент 18
Гибкий элемент 19
Гибкий элемент 20
Гибкий элемент 21
Гибкий элемент 22
Гибкий элемент 23
Гибкий элемент 24
Гибкий элемент 25
Пример
..
..
..
Попробуй сам »
Выровнять содержимое
Управляйте вертикальным выравниванием собранных гибких элементов с помощью .align-content- *
классы. Допустимые классы: .align-content-start (по умолчанию), .align-content-end , .align-content-center , .align-content-between , .align-content-about . и .align-content-stretch .
Примечание: Эти классы не влияют на отдельные строки гибких элементов.
Нажмите на кнопки ниже, чтобы увидеть разницу между пятью классами,
путем изменения вертикального выравнивания гибких элементов в поле примера:
выровнять контент-начало
выровнять-контент-конец
выровнять контент-центр
выровнять контент вокруг
выровнять контент-стрейч
Пример
Гибкий элемент 1
Гибкий элемент 2
Элемент гибкости 3
Гибкий элемент 4
Гибкий элемент 5
Гибкий элемент 6
Гибкий элемент 7
Гибкий элемент 8
Гибкий элемент 9
Гибкий элемент 10
Элемент гибкости 11
Гибкий элемент 12
Элемент гибкости 13
Гибкий элемент 14
Гибкий элемент 15
Элемент гибкости 16
Элемент гибкости 17
Гибкий элемент 18
Гибкий элемент 19
Гибкий элемент 20
Гибкий элемент 21
Гибкий элемент 22
Гибкий элемент 23
Гибкий элемент 24
Гибкий элемент 25
Пример
..
..
..
..
..
Попробуй сам »
Выровнять позиции
Управляйте вертикальным выравниванием отдельных строк гибких элементов с помощью .align-items- *
классы. Допустимые классы: .align-items-start , .align-items-end , .align-items-center , .align-items-baseline и .выровнять элементы-стрейч
(По умолчанию).
Нажмите кнопки ниже, чтобы увидеть разницу между пятью классами:
выровнять элементы-начало
выровнять элементы-конец
выровнять элементы-центр
выровнять элементы базовой линии
выровнять элементы-растягивать
Пример
Гибкий элемент 1
Гибкий элемент 2
Элемент гибкости 3
Пример
..
..
..
..
..
Попробуй сам »
Самовыравнивание
Управляйте вертикальным выравниванием указанного гибкого элемента с помощью .align-self- *
классы. Допустимые классы: .align-self-start , .align-self-end , .align-self-center , .align-self-baseline и .align-self-stretch .
(По умолчанию).
Нажмите кнопки ниже, чтобы увидеть разницу между пятью классами:
выровнять самозапуск
выровнять самоконец
выровнять самоцентрирование
выровнять себя по базовой линии
выровнять-растянуть
Пример
Гибкий элемент 1
Гибкий элемент 2
Элемент гибкости 3
Пример
Элемент Flex 1
Элемент Flex 2
Элемент Flex 3
Попробуй сам »
Адаптивные классы гибкости
Все классы гибкости поставляются с дополнительными адаптивными классами, что упрощает установку определенного класса гибкости для определенного размера экрана.
Символ * можно заменить на sm, md, lg или xl, которые обозначают малый, средний, большой или xlarge.
Класс Описание Пример
Гибкий контейнер
.d - * - гибкий Создает контейнер flexbox для разных экранов Попытайся
.d - * - inline-flex Создает встроенный контейнер flexbox для разных экранов Попытайся
Направление
.flex - * - ряд Отображение гибких элементов по горизонтали на разных экранах Попытайся
.flex - * - ряд-реверс Отображение гибких элементов по горизонтали и по правому краю на разных экранах Попытайся
.гибкий - * - столбец Вертикальное отображение гибких элементов на разных экранах Попытайся
.flex - * - колонка обратная Отображать гибкие элементы вертикально в обратном порядке на разных экранах Попытайся
Обоснованное содержание
.justify-content - * - начало Отображение гибких элементов с самого начала (с выравниванием по левому краю) на разных экранах Попытайся
.justify-content - * - конец Отображение гибких элементов в конце (с выравниванием по правому краю) на разных экранах Попытайся
.justify-content - * - центр Отображение гибких элементов в центре гибкого контейнера на разных экранах Попытайся
.justify-content - * - между Отображение гибких элементов «между» на разных экранах Попытайся
.justify-content - * - около Отображение гибких элементов «вокруг» на разных экранах Попытайся
Заполнение / равная ширина
.гибкий - * - заполнить Принудительное использование гибких элементов одинаковой ширины на разных экранах Попытайся
Рост
.flex - * - Grow-0 Не заставлять предметы расти на разных экранах
.flex - * - Grow-1 Заставляйте предметы расти на разных экранах
Усадка
.гибкий - * - термоусадочный-0 Не заставляйте предметы сжиматься на разных экранах
.flex - * - термоусадочная-1 Уменьшение размеров элементов на разных экранах
Заказать
. Заказ - * - 0-12 Измените порядок с 0 на 12 на маленьких экранах Попытайся
Обертка
.гибкий - * - nowrap Не переносить элементы на разные экраны Попытайся
.flex - * - обертка Перенести элементы на разные экраны Попытайся
.flex - * - обратная пленка Обратная упаковка товаров на разных экранах Попытайся
Выровнять содержимое
.align-content - * - начало Выровнять собранные предметы с самого начала на разных экранах Попытайся
.align-content - * - конец Выровнять собранные элементы в конце на разных экранах Попытайся
.align-content - * - центр Выровнять собранные предметы по центру на разных экранах Попытайся
.align-content - * - около Выровняйте собранные предметы «по кругу» на разных экранах Попытайся
.align-content - * - stretch Растянуть собранные предметы на разных экранах Попытайся
Выровнять элементы
.align-items - * - начало Выровнять отдельные ряды элементов с самого начала на разных экранах Попытайся
.align-items - * - конец Выровнять отдельные ряды элементов в конце на разных экранах Попытайся
.align-items - * - центр Выровнять отдельные ряды элементов по центру на разных экранах Попытайся
.align-items - * - базовый уровень Выровнять отдельные ряды элементов по базовой линии на разных экранах Попытайся
.align-items - * - протяжка Растягивать отдельные ряды элементов на разных экранах Попытайся
Самовыравнивание
. Category Разное Навигация по записям Специальность переводчик: Error 404 (Not Found)!!1 Что такое hr: HR менеджер. | Университет СИНЕРГИЯ Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт Архивы Ноябрь 2024 Октябрь 2024 Ноябрь 2019 Октябрь 2019 Сентябрь 2019 Август 2019 Июль 2019 Июнь 2019 Май 2019 Апрель 2019 Март 2019 Февраль 2019 Январь 2019 Декабрь 2018 Ноябрь 2018 Октябрь 2018 Сентябрь 2018 Июль 1983 Июнь 1983 Май 1983 Апрель 1983 Март 1983 Февраль 1983 Январь 1983 Декабрь 1982 Ноябрь 1982 Октябрь 1982 Сентябрь 1982 Август 1982 Июль 1982 Январь 1982 Декабрь 1981 Ноябрь 1981 Октябрь 1981 Сентябрь 1981 Август 1981 Июль 1981 Июнь 1981 Май 1981 Апрель 1981 Март 1981 Февраль 1981 Январь 1981 Декабрь 1980 Ноябрь 1980 Октябрь 1980 Сентябрь 1980 Август 1980 Июль 1980 Июнь 1980 Май 1980 Апрель 1980 Март 1980 Февраль 1980 Январь 1980 Декабрь 1979 Ноябрь 1979 Октябрь 1979 Сентябрь 1979 Август 1979 Июль 1979 Июнь 1979 Май 1979 Апрель 1979 Март 1979 Февраль 1979 Январь 1979 Декабрь 1978 Ноябрь 1978 Октябрь 1978 Сентябрь 1978 Август 1978 Июль 1978 Июнь 1978 Май 1978 Апрель 1978 Март 1978 Февраль 1978 Январь 1978 Декабрь 1977 Ноябрь 1977 Октябрь 1977 Сентябрь 1977 Август 1977 Июль 1977 Июнь 1977 Май 1977 Апрель 1977 Март 1977 Февраль 1977 Январь 1977 Декабрь 1976 Ноябрь 1976 Октябрь 1976 Сентябрь 1976 Август 1976 Июль 1976 Июнь 1976 Май 1976 Апрель 1976 Март 1976 Февраль 1976 Январь 1976 Декабрь 1975 Ноябрь 1975 Октябрь 1975 Сентябрь 1975 Август 1975 Июль 1975 Июнь 1975 Май 1975 Апрель 1975 Март 1975 Февраль 1975 Январь 1975 Декабрь 1974 Ноябрь 1974 Октябрь 1974 Сентябрь 1974 Август 1974 Июль 1974 Июнь 1974 Май 1974 Апрель 1974 Март 1974 Февраль 1974 Январь 1974 Декабрь 1973 Ноябрь 1973 Октябрь 1973 Сентябрь 1973 Август 1973 Июль 1973 Июнь 1973 Май 1973 Апрель 1973 Март 1973 Февраль 1973 Январь 1973 Декабрь 1972 Ноябрь 1972 Октябрь 1972 Сентябрь 1972 Август 1972 Июль 1972 Июнь 1972 Май 1972 Апрель 1972 Март 1972 Февраль 1972 Январь 1972 Декабрь 1971 Ноябрь 1971 Октябрь 1971 Сентябрь 1971 Август 1971 Июль 1971 Июнь 1971 Май 1971 Апрель 1971 Февраль 1971 Январь 1971 Декабрь 1970 Ноябрь 1970 Октябрь 1970 Сентябрь 1970 Август 1970 Июль 1970 Июнь 1970 Май 1970 Апрель 1970 Март 1970 Февраль 1970 Январь 1970 Рубрики Css Html Js Адаптив Верстк Идеи Разное Чего начать Шаблон Мета Войти Лента записей Лента комментариев WordPress.org Перепечатка и любое использование материалов сайта допускается только с разрешения автора © 2008-2024 Evgeniy Krysanov Карта Сайта

Класс	Описание	Пример
Гибкий контейнер
`.d - * - гибкий`	Создает контейнер flexbox для разных экранов	Попытайся
`.d - * - inline-flex`	Создает встроенный контейнер flexbox для разных экранов	Попытайся
Направление
`.flex - * - ряд`	Отображение гибких элементов по горизонтали на разных экранах	Попытайся
`.flex - * - ряд-реверс`	Отображение гибких элементов по горизонтали и по правому краю на разных экранах	Попытайся
`.гибкий - * - столбец`	Вертикальное отображение гибких элементов на разных экранах	Попытайся
`.flex - * - колонка обратная`	Отображать гибкие элементы вертикально в обратном порядке на разных экранах	Попытайся
Обоснованное содержание
`.justify-content - * - начало`	Отображение гибких элементов с самого начала (с выравниванием по левому краю) на разных экранах	Попытайся
`.justify-content - * - конец`	Отображение гибких элементов в конце (с выравниванием по правому краю) на разных экранах	Попытайся
`.justify-content - * - центр`	Отображение гибких элементов в центре гибкого контейнера на разных экранах	Попытайся
`.justify-content - * - между`	Отображение гибких элементов «между» на разных экранах	Попытайся
`.justify-content - * - около`	Отображение гибких элементов «вокруг» на разных экранах	Попытайся
Заполнение / равная ширина
`.гибкий - * - заполнить`	Принудительное использование гибких элементов одинаковой ширины на разных экранах	Попытайся
Рост
`.flex - * - Grow-0`	Не заставлять предметы расти на разных экранах
`.flex - * - Grow-1`	Заставляйте предметы расти на разных экранах
Усадка
`.гибкий - * - термоусадочный-0`	Не заставляйте предметы сжиматься на разных экранах
`.flex - * - термоусадочная-1`	Уменьшение размеров элементов на разных экранах
Заказать
`. Заказ - * - 0-12`	Измените порядок с 0 на 12 на маленьких экранах	Попытайся
Обертка
`.гибкий - * - nowrap`	Не переносить элементы на разные экраны	Попытайся
`.flex - * - обертка`	Перенести элементы на разные экраны	Попытайся
`.flex - * - обратная пленка`	Обратная упаковка товаров на разных экранах	Попытайся
Выровнять содержимое
`.align-content - * - начало`	Выровнять собранные предметы с самого начала на разных экранах	Попытайся
`.align-content - * - конец`	Выровнять собранные элементы в конце на разных экранах	Попытайся
`.align-content - * - центр`	Выровнять собранные предметы по центру на разных экранах	Попытайся
`.align-content - * - около`	Выровняйте собранные предметы «по кругу» на разных экранах	Попытайся
`.align-content - * - stretch`	Растянуть собранные предметы на разных экранах	Попытайся
Выровнять элементы
`.align-items - * - начало`	Выровнять отдельные ряды элементов с самого начала на разных экранах	Попытайся
`.align-items - * - конец`	Выровнять отдельные ряды элементов в конце на разных экранах	Попытайся
`.align-items - * - центр`	Выровнять отдельные ряды элементов по центру на разных экранах	Попытайся
`.align-items - * - базовый уровень`	Выровнять отдельные ряды элементов по базовой линии на разных экранах	Попытайся
`.align-items - * - протяжка`	Растягивать отдельные ряды элементов на разных экранах	Попытайся
Самовыравнивание
. Category Разное Навигация по записям Специальность переводчик: Error 404 (Not Found)!!1 Что такое hr: HR менеджер. \| Университет СИНЕРГИЯ Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт Архивы Ноябрь 2024 Октябрь 2024 Ноябрь 2019 Октябрь 2019 Сентябрь 2019 Август 2019 Июль 2019 Июнь 2019 Май 2019 Апрель 2019 Март 2019 Февраль 2019 Январь 2019 Декабрь 2018 Ноябрь 2018 Октябрь 2018 Сентябрь 2018 Июль 1983 Июнь 1983 Май 1983 Апрель 1983 Март 1983 Февраль 1983 Январь 1983 Декабрь 1982 Ноябрь 1982 Октябрь 1982 Сентябрь 1982 Август 1982 Июль 1982 Январь 1982 Декабрь 1981 Ноябрь 1981 Октябрь 1981 Сентябрь 1981 Август 1981 Июль 1981 Июнь 1981 Май 1981 Апрель 1981 Март 1981 Февраль 1981 Январь 1981 Декабрь 1980 Ноябрь 1980 Октябрь 1980 Сентябрь 1980 Август 1980 Июль 1980 Июнь 1980 Май 1980 Апрель 1980 Март 1980 Февраль 1980 Январь 1980 Декабрь 1979 Ноябрь 1979 Октябрь 1979 Сентябрь 1979 Август 1979 Июль 1979 Июнь 1979 Май 1979 Апрель 1979 Март 1979 Февраль 1979 Январь 1979 Декабрь 1978 Ноябрь 1978 Октябрь 1978 Сентябрь 1978 Август 1978 Июль 1978 Июнь 1978 Май 1978 Апрель 1978 Март 1978 Февраль 1978 Январь 1978 Декабрь 1977 Ноябрь 1977 Октябрь 1977 Сентябрь 1977 Август 1977 Июль 1977 Июнь 1977 Май 1977 Апрель 1977 Март 1977 Февраль 1977 Январь 1977 Декабрь 1976 Ноябрь 1976 Октябрь 1976 Сентябрь 1976 Август 1976 Июль 1976 Июнь 1976 Май 1976 Апрель 1976 Март 1976 Февраль 1976 Январь 1976 Декабрь 1975 Ноябрь 1975 Октябрь 1975 Сентябрь 1975 Август 1975 Июль 1975 Июнь 1975 Май 1975 Апрель 1975 Март 1975 Февраль 1975 Январь 1975 Декабрь 1974 Ноябрь 1974 Октябрь 1974 Сентябрь 1974 Август 1974 Июль 1974 Июнь 1974 Май 1974 Апрель 1974 Март 1974 Февраль 1974 Январь 1974 Декабрь 1973 Ноябрь 1973 Октябрь 1973 Сентябрь 1973 Август 1973 Июль 1973 Июнь 1973 Май 1973 Апрель 1973 Март 1973 Февраль 1973 Январь 1973 Декабрь 1972 Ноябрь 1972 Октябрь 1972 Сентябрь 1972 Август 1972 Июль 1972 Июнь 1972 Май 1972 Апрель 1972 Март 1972 Февраль 1972 Январь 1972 Декабрь 1971 Ноябрь 1971 Октябрь 1971 Сентябрь 1971 Август 1971 Июль 1971 Июнь 1971 Май 1971 Апрель 1971 Февраль 1971 Январь 1971 Декабрь 1970 Ноябрь 1970 Октябрь 1970 Сентябрь 1970 Август 1970 Июль 1970 Июнь 1970 Май 1970 Апрель 1970 Март 1970 Февраль 1970 Январь 1970 Рубрики Css Html Js Адаптив Верстк Идеи Разное Чего начать Шаблон Мета Войти Лента записей Лента комментариев WordPress.org Перепечатка и любое использование материалов сайта допускается только с разрешения автора © 2008-2024 Evgeniy Krysanov Карта Сайта