twitter-bootstrap Bootstrap 响应式按钮组对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24118144/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Responsive Button Group Justified
提问by user2567536
In twitter bootstrap 3, there is a component prepared name button group justified. URL: http://getbootstrap.com/components/#btn-groups-justified
在 twitter bootstrap 3 中，有一个组件准备好名称按钮组 justified。网址：http: //getbootstrap.com/components/#btn-groups-justified
Is there any way we could make .btn-group.btn-group-justifiedresponsive friendly if we have more buttons? Maybe we can put it to 2 rows without using display: blockand retaining its display: table-cellso that it could stay vertically align middle?
.btn-group.btn-group-justified如果我们有更多按钮，有什么办法可以使响应变得友好？也许我们可以将它放在 2 行而不使用display: block和保留它，display: table-cell以便它可以垂直对齐中间？
Is there built in classes that bootstrap prepared? since they prepared this Button Group Justified css component, dont they have anything to make it responsive friendly if there are many buttons with longer words as text?
是否有准备引导程序的内置类？既然他们准备了这个 Button Group Justified css 组件，那么如果有很多带有较长单词作为文本的按钮，他们难道没有什么可以使它响应友好吗？
Here's my fiddle: http://jsfiddle.net/kHW3V/
这是我的小提琴：http: //jsfiddle.net/kHW3V/
回答by nolawi
回答by krinklesaurus
Using https://getbootstrap.com/components/#nav-justifiedworked for me
使用https://getbootstrap.com/components/#nav-justified对我有用
<ul class="nav nav-pills nav-justified">
<li><a role="button" class="btn btn-default" href="/mypage1"><img src="/images/myimage1.png" height="32" alt="myimage1"></a></li>
<li><a role="button" class="btn btn-default" href="/mypage2"><img src="/images/myimage2.png" height="32" alt="myimage2"></a></li>
<li><a role="button" class="btn btn-default" href="/mypage3"><img src="/images/myimage3.png" height="32" alt="myimage3"></a></li>
</ul>
回答by kmg
You can add this style for all .btninside .btn-group-justified.
您可以为所有.btninside添加此样式.btn-group-justified。
.btn-group-justified > .btn {
width: auto;
display: inline-block;
}
