Чтобы вложить группы кнопок и раскрывающиеся меню в Bootstrap 5, вы можете использовать следующие методы:
- Использование класса «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>
- Использование классов «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>
- Вложение нескольких уровней. Вы можете вкладывать группы кнопок и раскрывающиеся меню на несколько уровней, обернув их в дополнительные элементы-контейнеры с соответствующими классами.
<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>