Если вы используете Bootstrap 4 для своих проектов веб-разработки, вы, несомненно, столкнетесь с необходимостью создавать встроенные списки. Встроенные списки — это полезный способ отображения элементов по горизонтали, а не по вертикали, обеспечивая элегантный и компактный дизайн для навигационных меню, кнопок социальных сетей и многого другого. В этой статье мы рассмотрим различные методы создания встроенных списков в Bootstrap 4 и предоставим вам практические примеры кода для их реализации в ваших проектах.

Метод 1: использование класса «d-inline».
Один из самых простых способов создания встроенного списка — использование класса «d-inline», предоставляемого Bootstrap 4. Этот класс можно применять к элементам списка. или любой другой элемент, который вы хотите отображать встроенным. Вот пример:

<ul class="list-inline">
  <li class="d-inline">Item 1</li>
  <li class="d-inline">Item 2</li>
  <li class="d-inline">Item 3</li>
</ul>

Метод 2: использование Flexbox
Bootstrap 4 использует Flexbox, мощный модуль макета CSS, для выравнивания и позиционирования элементов. Используя Flexbox, вы можете легко создавать встроенные списки с точным контролем интервалов и выравнивания. Вот пример:

<ul class="list-inline d-flex">
  <li class="list-inline-item">Item 1</li>
  <li class="list-inline-item">Item 2</li>
  <li class="list-inline-item">Item 3</li>
</ul>

Метод 3: использование класса «хлебная крошка»
Класс «хлебная крошка» в Bootstrap 4 в первую очередь предназначен для создания навигации по навигационной цепочке. Однако его также можно перепрофилировать для создания встроенных списков. Вот пример:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">Item 1</li>
    <li class="breadcrumb-item">Item 2</li>
    <li class="breadcrumb-item">Item 3</li>
  </ol>
</nav>

Метод 4: пользовательский стиль CSS
Если вам нужны дополнительные параметры настройки, вы всегда можете написать собственный CSS для создания встроенных списков. Применяя соответствующие правила CSS, например, устанавливая для свойства display значение «inline» или используя методы с плавающей запятой, вы можете добиться желаемого встроенного макета. Вот пример:

<ul class="custom-inline-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<style>
.custom-inline-list li {
  display: inline;
  margin-right: 10px;
}
</style>

В этой статье мы рассмотрели несколько методов создания встроенных списков в Bootstrap 4. Предпочитаете ли вы использовать классы Bootstrap, такие как «d-inline» или «list-inline», использовать Flexbox или настраивать с помощью CSS, у вас есть несколько вариантов. для достижения желаемого встроенного макета. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует требованиям вашего проекта. Освоив встроенные списки, вы улучшите визуальную привлекательность и удобство использования вашего веб-сайта Bootstrap 4.