Bootstrap4 按钮组

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 = " # " > Tablet </ a > < a class = " dropdown-item " href = " # " > Smartphone </ 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 = " # " > Tablet </ a > < a class = " dropdown-item " href = " # " > Smartphone </ 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 = " # " > Tablet </ a > < a class = " dropdown-item " href = " # " > Smartphone </ 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 >

尝试一下 »