天天看點

Bootstrapbutton組

button組同意多個button被堆疊在同一行上。當你想要把button對齊在一起時,這就顯得很實用。

給div加上class .btn-group

Bootstrapbutton組

使用class .btn-toolbar和 .btn-group

Bootstrapbutton組

能夠看出每個button組之間都有一點空隙

.btn-toolbar>.btn-group {

    margin-left: 5px;

}

給btn-group 加上.btn-group-lg,.btn-group-sm。.btn-group-xs能夠調整整個button組的button大小

Bootstrapbutton組

能夠在一個button組内嵌套還有一個button組。即,在一個 .btn-group 内嵌套還有一個 .btn-group 。

當下拉菜單與一系列button組合使用

時。就會用到這個。

Bootstrapbutton組

感覺嵌套并沒有什麼作用,于是去掉btn-group,顯示效果變成例如以下。

Bootstrapbutton組

審查元素。發現.dropdown-menu使用的是絕對定位,而.btn-group是相對定位,由于就不難了解為什麼我們去掉嵌套的

btn-group之後,效果變成了上圖所看到的。

使用.btn-group-vertical

Bootstrapbutton組