Bootstrap5 按钮组

Bootstrap 5 中允许我们将按钮放在同一行上。

可以在 <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|xs 类来设置按钮组的大小。

实例

< 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-bs-toggle = " dropdown " > Sony </ button > < div class = " dropdown-menu " > < a class = " dropdown-item " href = " # " > Tablet </ a > < a class = " dropdown-item " href = " # " > Smartphone </ a > </ div > </ 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-bs-toggle = " dropdown " > Sony </ button > < ul class = " dropdown-menu " > < li > < a class = " dropdown-item " href = " # " > Tablet </ a > </ li > < li > < a class = " dropdown-item " href = " # " > Smartphone </ a > </ li > </ ul > </ 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 >

尝试一下 »