Как вложить группы кнопок и раскрывающиеся меню в Bootstrap 5: методы и примеры

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

  1. Использование класса «btn-group». Оберните группы кнопок и раскрывающиеся меню в элемент-контейнер с помощью класса «btn-group». Это сгруппирует их и применит необходимые стили.
<div class="btn-group">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-primary">Button 2</button>
  <div class="btn-group">
    <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Item 1</a></li>
      <li><a class="dropdown-item" href="#">Item 2</a></li>
      <li><a class="dropdown-item" href="#">Item 3</a></li>
    </ul>
  </div>
</div>
  1. Использование классов «btn-group» и «dropdown». Вы также можете применить класс «dropdown» непосредственно к элементу контейнера группы кнопок, чтобы добиться эффекта вложенности.
<div class="btn-group dropdown">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-primary">Button 2</button>
  <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Item 1</a></li>
    <li><a class="dropdown-item" href="#">Item 2</a></li>
    <li><a class="dropdown-item" href="#">Item 3</a></li>
  </ul>
</div>
  1. Вложение нескольких уровней. Вы можете вкладывать группы кнопок и раскрывающиеся меню на несколько уровней, обернув их в дополнительные элементы-контейнеры с соответствующими классами.
<div class="btn-group">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-primary">Button 2</button>
  <div class="btn-group">
    <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Dropdown 1
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Item 1</a></li>
      <li><a class="dropdown-item" href="#">Item 2</a></li>
      <li>
        <div class="btn-group">
          <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
            Dropdown 2
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Item 3</a></li>
            <li><a class="dropdown-item" href="#">Item 4</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>