引导全宽按钮 .btn-group-vertical

Bootstrap full width buttons .btn-group-vertical

1
2
3
4
5
6
7
Overview
Button
Button
Button

Button
Button

我正在努力使这些按钮成为它们所在容器的全宽,但我似乎无法让它工作,我尝试了 .btn-group-justified 但没有任何东西适用于 .btn -组-垂直。有人可以帮忙吗?

编辑 2017 年 11 月 28 日:标记了已接受的答案并修复了我发现的一些错别字。


据我所知,btn-group-vertical 的自动设置宽度为 85px。将其设置为 100%,可以解决您的问题。它应该在样式表中完成,但下面是一个内联解决方案:

1
2
3
4
5
6
7
Overview
Button
Button
Button

Button
Button

编辑:虽然这可行,但我会选择 Vlads 的答案。它比我的好。并且也有效。虽然,您不必将类添加到各个按钮。将类添加到按钮组就足够了。像这样:

1
2
3
4
5
6
7
        Overview
        Button
        Button
        Button
       
        Button
        Button


你不需要通过内联样式添加宽度,只需将按钮组放在一行并给它一个col宽度。

1
2
3
4
5
6
7
            Overview
            Button
            Button
            Button
           
            Button
            Button


要使按钮全宽,只需将 btn-block 类添加到按钮。看看这个 - Example