Bootstrap 4 Группы кнопок
Bootstrap 4 позволяет размещать кнопки в одной строке.
Вы можете<div>добавить к элементу.btn-groupкласс, чтобы создать группу кнопок
Пример
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Попробуйте сами »
Совет:Мы можем использовать.btn-group-lg|smкласс, чтобы задать размер группы кнопок.
Пример
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Попробуйте сами »
Вертикальная группа кнопок
Вы можете использовать.btn-group-verticalкласс, чтобы создать вертикальную группу кнопок:
Пример
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Попробуйте сами »
Вложенные группы кнопок и выпадающие меню
Мы можем разместить выпадающее меню внутри группы кнопок:
Пример
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Планшет</a>
<a class="dropdown-item" href="#">Смартфон</a>
</div>
</div>
</div>
Попробуйте сами »
Выпадающее меню разделенной кнопки
Пример
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Планшет</a>
<a class="dropdown-item" href="#">Смартфон</a>
</div>
</div>
Попробуйте сами »
Вертикальные группы кнопок и выпадающие меню
Пример
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Планшет</a>
<a class="dropdown-item" href="#">Смартфон</a>
</div>
</div>
</div>
Попробуйте сами »
Несколько групп кнопок
Группы кнопок можно расположить рядом в одной строке:
Пример
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>
Попробуйте сами »