Bootstrap 4 выравнивание по горизонтали – Как в bootstrap 4 сделать выравнивание списка по вертикали в зависимости от родителя? — Вебджем.рф

Содержание

Bootstrap 4. Flexbox

Раньше Bootstrap использовал 12-ти колоночную сетку. Теперь используется новый режим flexbox, но основные приёмы работы с сеткой остались с небольшими изменениями.

Режим flexbox позволяет макету автоматически вычислять размер каждой колонки.


<div>
  <div>
    <div>
      Половинка
    </div>
    <div>
      Половинка
    </div>
  </div>
  
  <div>
    <div>
      Одна треть
    </div>
    <div>
      Одна треть
    </div>
    <div>
      Одна треть
    </div>
  </div>
</div>

Половинка

Одна треть

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

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


<div>
  <div>
    <div>
      (12 - 6) / 2 = 3
    </div>
    <div>
      6 колонок
    </div>
    <div>
      (12 - 6) / 2 = 3
    </div>
  </div>
  
  <div>
    <div>
      
    </div>
    <div>
      5 колонок
    </div>
    <div>
      
    </div>
  </div>
  
  <div>
    <div>
      
    </div>
    <div>
      4 колонки
    </div>
    <div>
      
    </div>
  </div>
</div>

(12 — 6) / 2 = 3

6 колонок

(12 — 6) / 2 = 3

Используя классы col-{breakpoint}-auto, можно создать блок, размер которого будет определяться его содержимым. Также для блока можно задать классы горизонтального выравнивания. В этом случае общий ряд будет сжат до необходимых размеров.


<div>
  <div>
    <div>
      1 of 3
    </div>
    <div>
      Слово
    </div>
    <div>
      3 of 3
    </div>
  </div>

  <div>
    <div>
      1 of 3
    </div>
    <div>
      Два слова
    </div>
    <div>
      3 of 3
    </div>
  </div>
  
    <div>
    <div>
      1 of 3
    </div>
    <div>
      Здесь три слова
    </div>
    <div>
      3 of 3
    </div>
  </div>
</div>

1 of 3

Два слова

3 of 3

1 of 3

Здесь три слова

3 of 3

Можно оставить стандартное поведение, не сжимая общую ширину.

1 of 3

Два слова

3 of 3


<div>
  <div>
    <div>
      1 of 3
    </div>
    <div>
      Два слова
    </div>
    <div>
      3 of 3
    </div>
  </div>
</div>

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


<div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>
<div>
  <div>col-8</div>
  <div>col-4</div>
</div>

Из стопки в ряд

Используя классы col-sm-*, вы можете создать базовую сеточную систему, которая разместит блоки в виде стопки на телефонах, а затем будет выводить блоки в один ряд.


<div>
  <div>col-sm-8</div>
  <div>col-sm-4</div>
</div>
<div>
  <div>col-sm</div>
  <div>col-sm</div>
  <div>col-sm</div>
</div>

Смешиваем все классы

Можете комбинировать все классы, как вам нужно.

.col .col-md-8

.col-6 .col-md-4


<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div>
  <div>.col .col-md-8</div>
  <div>.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div>
  <div>.col-6 .col-md-4</div>
  <div>.col-6 .col-md-4</div>
  <div>.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div>
  <div>.col-6</div>
  <div>.col-6</div>
</div>

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

Flexbox дает два способа вертикального позиционирования колонок.

Выравниваем колонки внутри ряда относительно верха, середины, низа, если позволяет высота. Указываем у row классы flex-items-xs-start, flex-items-xs-center, flex-items-xs-end.

По верху

По центру

По низу


<div>
  <div>
    <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-self-start, align-self-center, align-self-end.

One of three columns


<div>
  <div>
    <div>
      One of three columns
    </div>
    <div>
      One of three columns
    </div>
    <div>
      One of three columns
    </div>
  </div>
</div>

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

Создаём блоки, размер которых меньше 12 колонок. Дальше управляем их выравниванием из-за свободного места, указывая у ряда row классы justify-content-start, justify-content-center, justify-content-end. Также обратите внимание на классы

justify-content-around, justify-content-between, которые окружают свободно место.

По левому краю

По центру

По правому краю


<div>
  <div>
    <div>
      По левому краю
    </div>
    <div>
      По левому краю
    </div>
  </div>
  
  <div>
    <div>
      По центру
    </div>
    <div>
      По центру
    </div>
  </div>
  
  <div>
    <div>
      По правому краю
    </div>
    <div>
      По правому краю
    </div>
  </div>
  
  <div>
    <div>
      Around
    </div>
    <div>
      Around
    </div>
  </div>
  
  <div>
    <div>
      Between
    </div>
    <div>
      Between
    </div>
  </div>
</div>

Промежутки

Используйте класс .no-gutters, чтобы убрать промежутки между блоками. Класс удаляет отрицательные margins из .row и горизонтальные padding из всех дочерних колонок.

.col-12 .col-sm-6 .col-md-8 no-gutters

.col-6 .col-md-4

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

Сортировка колонок

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

Разработчики Bootstrap реализовали встроенное свойство flexbox order на основе трех классов сортировки, которые применим к колонкам col:

.flex-first – отображается первым
.flex-last – отображается последним
.flex-unordered – отображается между первым и последним

Первый, но не первый и не последний

Второй, но последний

Третий, но первый


<div>
  <div>
    <div>
      Первый, но не первый и не последний
    </div>
    <div>
      Второй, но последний
    </div>
    <div>
      Третий, но первый
    </div>
  </div>
</div>

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

Для сдвига колонок вправо используйте .offset-md-*, которые увеличивают левый отступ на * колонок. Например, .offset-md-4 сдвигает на четыре колонки.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3


<div>
  <div>
    <div>.col-md-4</div>
    <div>.col-md-4 .offset-md-4</div>
  </div>
  <div>
    <div>.col-md-3 .offset-md-3</div>
    <div>.col-md-3 .offset-md-3</div>
  </div>
  <div>
   <div>.col-md-6 .offset-md-3</div>
  </div>
</div>

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

Bootstrap 4-выравнивание по горизонтали и вертикали

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

Может кто-нибудь сказать мне, лучший подход для этого ?

    <div>

  <div>

    <div>
      <img src="../assets/medlogo.png">

      <h2>Acessar o programa</h2>
      <div>
        <img src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
          alt="">
        <form>
          <input type="text" placeholder="Email" required autofocus>
          <input type="password" placeholder="Password" required>
          <button type="submit">
                  Sign in</button>
        </form>
      </div>

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

Спасибо

css bootstrap-4

Поделиться Источник GCoe 08 октября 2017 в 23:56

2 Ответа

Bootstrap4 теперь использует css Flexbox, так что вы можете использовать то же самое. Flexbox имеет вертикальную и горизонтальную поддержку выравнивания из коробки.

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

Вы можете прочитать больше о Flexbox здесь: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Поделиться Thai Duong Tran 09 октября 2017 в 00:09

Попробовать это

  <div>
      <img src="../assets/medlogo.png">

      <h2>Acessar o programa</h2>
      <div>
        <img src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
          alt="">
        <form>
          <input type="text" placeholder="Email" required autofocus>
          <input type="password" placeholder="Password" required>
          <button type="submit">
                  Sign in</button>
        </form>
      </div>

    </div>

Я удалил col-md-4 и заменил его на d-flex justify-content-center align-content-center . Это bootstrap 4 бета утилиты для flexbox. Хотя вы также можете сделать в стиле линии

Дополнительная информация http://getbootstrap.com/docs/4.0/utilities/flex/

Поделиться brijmcq 09 октября 2017 в 00:34

Вертикальное выравнивание ячеек с Bootstrap 4
Я создаю страницу администратора, которая запрашивает затем отчеты о Весах страниц ключевых страниц для сайта (посадка и т. д.) Поскольку Bootstrap 4 близок, я использовал его для создания макета,…

vim: открыть 4 файла разделить по горизонтали AND по вертикали
В командной строке vim может открыть 4 файла, разделенных по горизонтали, vim -o file1 file2 file3 file4 или 4 файла разделены по вертикали, vim -O file1 file2 file3 file4 Как открыть 4 файла, чтобы…

Центрирование div по вертикали и горизонтали
Есть ли какой-нибудь способ центрировать .polygon_container и .polygon по вертикали и горизонтали? Также есть ли возможность сделать размер его отзывчивым, как тег <img> ниже?…

Bootstrap как выровнять элементы по вертикали и горизонтали
Я хочу реализовать что-то отзывчивое, как страница duckduckgo.com . Он имеет логотип, литерал DuckDuckGo и окно поиска. Когда я сжимаю браузер до почти горизонтальной полосы, три компонента…

bootstrap v3.3.6-выравнивание содержимого по вертикали в столбце bootstrap
Я использую bootstrap v3.3.6 и пытаюсь выровнять по вертикали ‘My Link’ в середине. Есть ли какой-либо класс для достижения этой цели? Попробовал это, не сработало для меня вертикальное выравнивание…

Выравнивание изображения по горизонтали и вертикали в прокручиваемом div
У вас есть изображение и вы хотите иметь возможность увеличивать/уменьшать его в прокручиваемой области с фиксированным размером. Это легко, но если изображение меньше, чем прокручиваемая область,…

Вертикальное и горизонтальное выравнивание в полноэкранном режиме с bootstrap 3
Я новичок в этом мире, и у меня есть некоторые трюки, которые мне еще нужно изучить, я играю в этом дизайне, и самое главное, что я был раздавлен, — это выравнивание. Я пытаюсь сделать это…

Сделайте так, чтобы текст отображался в центре SPAN по горизонтали и вертикали
Я хочу отрисовать некоторый текст в DIV, который должен появиться в центре SPAN-как по вертикали, так и по горизонтали. Это мой jsfiddle- http://jsfiddle.net/8Syqv/13 / HTML: <span>something…

Выравнивание текста по вертикали с помощью Bootstrap
Попробовал решение здесь: вертикальное выравнивание с Bootstrap 3 и здесь: вертикальное выравнивание: середина с Bootstrap 2 не работала. Вот эта страница: http://yonicks.com/falican/exemple.htm Код…

Проблема выравнивания текста кнопки по вертикали и горизонтали
У меня есть несколько кнопок с текстом внутри. То, что я пытаюсь сделать, — это выровнять их по середине от вертикали и горизонтали. На примере у меня есть 3 кнопки (левая больше по назначению)…

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

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

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

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

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

<div>I'm a flexbox container!</div>
Я — контейнер flexbox!

<div>I'm an inline flexbox container!</div>
Также существуют отзывчивые варианты .d-flex и .d-inline-flex.

.d-flex

.d-inline-flex

.d-sm-flex

.d-sm-inline-flex

.d-md-flex

.d-md-inline-flex

.d-lg-flex

.d-lg-inline-flex

.d-xl-flex

.d-xl-inline-flex

Направление

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

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

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

<div> <div>Flex элемент 1</div> <div>Flex элемент 2</div> <div>Flex элемент 3</div> </div> <div> <div>Flex элемент 1</div> <div>Flex элемент 2</div> <div>Flex элемент 3</div> </div>
Используйте класс .flex-column для создания вертикального направления, или .flex-column-reverse, чтобы вертикальное направление начиналось с противоположной стороны.

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

<div> <div>Flex элемент 1</div> <div>Flex элемент 2</div> <div>Flex элемент 3</div> </div> <div> <div>Flex элемент 1</div> <div>Flex элемент 2</div> <div>Flex элемент 3</div> </div>
Для flex-direction также есть отзывчивые вариации.

.flex-row

.flex-row-reverse

.flex-column

.flex-column-reverse

.flex-sm-row

.flex-sm-row-reverse

.flex-sm-column

.flex-sm-column-reverse

.flex-md-row

.flex-md-row-reverse

.flex-md-column

.flex-md-column-reverse

.flex-lg-row

.flex-lg-row-reverse

.flex-lg-column

.flex-lg-column-reverse

.flex-xl-row

.flex-xl-row-reverse

.flex-xl-column

.flex-xl-column-reverse

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

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

Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент

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

.justify-content-start

.justify-content-end

.justify-content-center

.justify-content-between

.justify-content-around

.justify-content-sm-start

.justify-content-sm-end

.justify-content-sm-center

.justify-content-sm-between

.justify-content-sm-around

.justify-content-md-start

.justify-content-md-end

.justify-content-md-center

.justify-content-md-between

.justify-content-md-around

.justify-content-lg-start

.justify-content-lg-end

.justify-content-lg-center

.justify-content-lg-between

.justify-content-lg-around

.justify-content-xl-start

.justify-content-xl-end

.justify-content-xl-center

.justify-content-xl-between

.justify-content-xl-around

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

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

Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент

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

.align-items-start

.align-items-end

.align-items-center

.align-items-baseline

.align-items-stretch

.align-items-sm-start

.align-items-sm-end

.align-items-sm-center

.align-items-sm-baseline

.align-items-sm-stretch

.align-items-md-start

.align-items-md-end

.align-items-md-center

.align-items-md-baseline

.align-items-md-stretch

.align-items-lg-start

.align-items-lg-end

.align-items-lg-center

.align-items-lg-baseline

.align-items-lg-stretch

.align-items-xl-start

.align-items-xl-end

.align-items-xl-center

.align-items-xl-baseline

.align-items-xl-stretch

Align self

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

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

<div>Выровненный элемент flex</div> <div>Выровненный элемент flex</div> <div>Выровненный элемент flex</div> <div>Выровненный элемент flex</div> <div>Выровненный элемент flex</div>
Отзывчивые вариации для align-self.

.align-self-start

.align-self-end

.align-self-center

.align-self-baseline

.align-self-stretch

.align-self-sm-start

.align-self-sm-end

.align-self-sm-center

.align-self-sm-baseline

.align-self-sm-stretch

.align-self-md-start

.align-self-md-end

.align-self-md-center

.align-self-md-baseline

.align-self-md-stretch

.align-self-lg-start

.align-self-lg-end

.align-self-lg-center

.align-self-lg-baseline

.align-self-lg-stretch

.align-self-xl-start

.align-self-xl-end

.align-self-xl-center

.align-self-xl-baseline

.align-self-xl-stretch

Наполнение

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

Flex элемент
Flex элемент
Flex элемент

<div> <div>Flex элемент</div> <div>Flex элемент</div> <div>Flex элемент</div> </div>
Для этого класса также есть адаптивные вариации flex-fill.

.flex-fill

.flex-sm-fill

.flex-md-fill

.flex-lg-fill

.flex-xl-fill

Увеличение и уменьшение

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

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

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

Flex элемент
Flex элемент

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

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

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

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

Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент

<div> <div>Flex элемент</div> <div>Flex элемент</div> <div>Flex элемент</div> </div> <div> <div>Flex элемент</div> <div>Flex элемент</div> <div>Flex элемент</div> </div> <div> <div>Flex элемент</div> <div>Flex элемент</div> <div>Flex элемент</div> </div>
С элементами выравнивания

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

Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент

<div> <div>Flex элемент</div> <div>Flex элемент</div> <div>Flex элемент</div> </div> <div> <div>Flex элемент</div> <div>Flex элемент</div> <div>Flex элемент</div> </div>
Обертка

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

Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент

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

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

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

.flex-nowrap

.flex-wrap

.flex-wrap-reverse

.flex-sm-nowrap

.flex-sm-wrap

.flex-sm-wrap-reverse

.flex-md-nowrap

.flex-md-wrap

.flex-md-wrap-reverse

.flex-lg-nowrap

.flex-lg-wrap

.flex-lg-wrap-reverse

.flex-xl-nowrap

.flex-xl-wrap

.flex-xl-wrap-reverse

Порядок

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

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

<div> <div>Первый flex элемент</div> <div>Второй flex элемент</div> <div>Третий flex элемент</div> </div>
Отзывчивые вариации есть также для order.

.order-0

.order-1

.order-2

.order-3

.order-4

.order-5

.order-6

.order-7

.order-8

.order-9

.order-10

.order-11

.order-12

.order-sm-0

.order-sm-1

.order-sm-2

.order-sm-3

.order-sm-4

.order-sm-5

.order-sm-6

.order-sm-7

.order-sm-8

.order-sm-9

.order-sm-10

.order-sm-11

.order-sm-12

.order-md-0

.order-md-1

.order-md-2

.order-md-3

.order-md-4

.order-md-5

.order-md-6

.order-md-7

.order-md-8

.order-md-9

.order-md-10

.order-md-11

.order-md-12

.order-lg-0

.order-lg-1

.order-lg-2

.order-lg-3

.order-lg-4

.order-lg-5

.order-lg-6

.order-lg-7

.order-lg-8

.order-lg-9

.order-lg-10

.order-lg-11

.order-lg-12

.order-xl-0

.order-xl-1

.order-xl-2

.order-xl-3

.order-xl-4

.order-xl-5

.order-xl-6

.order-xl-7

.order-xl-8

.order-xl-9

.order-xl-10

.order-xl-11

.order-xl-12

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

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

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

Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент

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

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

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

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

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

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

.align-content-start

.align-content-end

.align-content-center

.align-content-around

.align-content-stretch

.align-content-sm-start

.align-content-sm-end

.align-content-sm-center

.align-content-sm-around

.align-content-sm-stretch

.align-content-md-start

.align-content-md-end

.align-content-md-center

.align-content-md-around

.align-content-md-stretch

.align-content-lg-start

.align-content-lg-end

.align-content-lg-center

.align-content-lg-around

.align-content-lg-stretch

.align-content-xl-start

.align-content-xl-end

.align-content-xl-center

.align-content-xl-around

.align-content-xl-stretch

css — Bootstrap 4 Центр вертикальное и горизонтальное выравнивание
Обновление в 2018 году — Bootstrap 4.0.0
Там нет никакой необходимости для дополнительной 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%( высоту в процентах ) на любом элементе, элемент занимает в высоту это контейнер . В современных браузерах VH единицы height:100vh;могут быть использованы вместо , %чтобы получить нужную высоту.
Горизонтальный центр:
text-centerдо центра display:inlineэлементов & содержимого столбца
mx-auto для центрирования внутри гибких элементов
offset-*или mx-autoможет быть использован для центрирования колонн ( .col-)
justify-content-centerк центру столбцов ( col-*) внутриrow
Вертикальный Align Center в Bootstrap 4
Bootstrap 4 полноэкранных центрируются форма
Bootstrap группы входов 4 центра
bootstrap4 — выравнивание по горизонтали по центру Bootstrap 4
Stack Overflow на русском
Loading…

0

+0

Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом

Справка Подробные ответы на любые возможные вопросы

Мета Обсудить принципы работы и политику сайта

О нас Узнать больше о компании Stack Overflow

Бизнес Узнать больше о поиске разработчиков или рекламе на сайте

Отступы. Утилиты · Bootstrap

Bootstrap включает широкий диапазон сокращений откликов и полезных классов для изменения внешнего вида элемента.

Как это устроено

Назначайте «отзывчивые» значения margin или padding элементу или поднабору его сторон с помощью удобных классов. Сюда входит поддержка индивидуальных свойств, всех свойств и вертикальных и горизонтальных свойств. Классы созданы дефолтной карте Sass, и варьируются от .25rem до 3rem.

Замечание

Утилиты отступов, которые работают на всех брейкпойнтах – от xs до xl – не имеют аббревиатуры брейкпойнта в названии. Это сделано потому, что те классы применяются, начиная с min-width: 0 и выше, и т.о. не привязаны к медиа-запросам. Названия остающихся брейкпойнтов, однако, содержит в себе аббревиатуры брейкпойнтов.

Классы названы по формату {property}{sides}-{size} для xs и {property}{sides}-{breakpoint}-{size} для sm, md, lg и xl.

Где свойство – это одно из:

m — для классов, которые задают margin

p — для классов, которые задают padding

Где свойство – это одно из:

t — для классов, которые задают margin-top или padding-top

b — для классов, которые задают margin-bottom или padding-bottom

l — для классов, которые задают margin-left или padding-left

r — для классов, которые задают margin-right или padding-right

x — для классов, которые задают и *-left и *-right

y — для классов, которые задают и *-top и *-bottom

blank — для классов, которые задают margin или padding для всех 4-х сторон элемента

Где размер – это один из:

0 — для классов, которые удаляют margin или padding назначая его равны 0

1 — (по умолчанию) для классов, которые устанавливают margin или padding к значению, равному $spacer * .25

2 — (по умолчанию) для классов, которые устанавливают margin или padding к значению, равному $spacer * .5

3 — (по умолчанию) для классов, которые устанавливают margin или padding к значению, равному $spacer

4 — (по умолчанию) для классов, которые устанавливают margin или padding к значению, равному $spacer * 1.5

5 — (по умолчанию) для классов, которые устанавливают margin или padding к значению, равному $spacer * 3

auto — для классов, которые устанавливают margin как auto

(Вы можете добавить больше размеров, добавляя разделы в карту Sass $spacers.)

Примеры

Вот несколько понятных примеров этих классов:

.mt-0 { margin-top: 0 !important; } .ml-1 { margin-left: ($spacer * .25) !important; } .px-2 { padding-left: ($spacer * .5) !important; padding-right: ($spacer * .5) !important; } .p-3 { padding: $spacer !important; }
Горизонтальное центрирование

В дополнение, Bootstrap также включает класс .mx-auto для горизонтального выравнивания блока блока содержимого фиксированной ширины – т.е. контент, которому заданы display: block и набор width с помощью установки горизонтальных марджинов как auto.

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

<div> Центрированный элемент </div>
Отрицательные отступы

В CSS свойства полей margin могут использовать отрицательные значения (padding не может). Начиная с версии 4.2, мы добавляли утилиты с отрицательным запасом для каждого ненулевого целочисленного размера, указанного выше (например, 1, 2, 3, 4, 5). Эти утилиты идеально подходят для настройки желобов столбцов сетки через точки останова (breakpoints).

Синтаксис почти такой же, как у утилит с положительным запасом по умолчанию, но с добавлением n перед запрошенным размером. Вот пример класса, который противоположен .mt-1:

.mt-n1 { margin-top: -0.25rem !important; }
Вот пример настройки сетки Bootstrap на средней (md) точке останова и выше. Мы увеличили заполнение .col с помощью .px-md-5, а затем противодействовали этому с .mx-md-n5 на родительском .row.

<div> <div><div>Custom column padding</div></div> <div><div>Custom column padding</div></div> </div>

Bootstrap 4 выравнивание по горизонтали – Как в bootstrap 4 сделать выравнивание списка по вертикали в зависимости от родителя?

Bootstrap 4. Flexbox

Из стопки в ряд

Смешиваем все классы

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

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

Промежутки

Сортировка колонок

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

Реклама

Bootstrap Бутстрап 4 Flex

Bootstrap 4 Flex

Flexbox

Пример

Пример

Пример

Пример

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

Пример

Пример

Bootstrap 4-выравнивание по горизонтали и вертикали

2 Ответа

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

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

Направление

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

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

Align self

Наполнение

Увеличение и уменьшение

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

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

Обертка

Порядок

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

css — Bootstrap 4 Центр вертикальное и горизонтальное выравнивание

высота контейнера с элементом (ами) до центра должна быть на 100%

bootstrap4 — выравнивание по горизонтали по центру Bootstrap 4

Отступы. Утилиты · Bootstrap

Как это устроено

Замечание

Примеры

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

Отрицательные отступы

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

Рубрики