Bootstrap响应按钮组合理

Question

在twitter bootstrap 3中，有一个组件准备名称按钮组对齐。 网址：http://getbootstrap.com/components/#btn-groups-justified

如果我们有更多按钮，我们有什么方法可以使.btn-group.btn-group-justified响应友好？也许我们可以在不使用display: block并保留其display: table-cell的情况下将其设置为2行，以便它可以保持垂直对齐中间位置？

是否内置了引导程序准备好的类？因为他们准备了这个Button Group Justified css组件，如果有许多带有较长单词的按钮作为文本，他们是否有任何东西可以使它具有响应性？

这是我的小提琴：http://jsfiddle.net/kHW3V/

Answer 1

是的，如果您使用这样的常规按钮组已经响应

<div class="btn-group">
    <button type="button" class="btn btn-default">Text</button>
</div>

更新了Fiddle

如果你必须有合理的，请告诉我！

Answer 2

使用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>

Answer 3

您可以为.btn内的所有.btn-group-justified添加此样式。

.btn-group-justified > .btn {
  width: auto;
  display: inline-block;
}