Bootstrap 响应式按钮组对齐答案

【问题标题】：Bootstrap Responsive Button Group JustifiedBootstrap 响应式按钮组对齐
【发布时间】：2014-07-29 20:49:02
【问题描述】：

在twitter bootstrap 3中，有一个组件准备名字button group justified。网址：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/

【问题讨论】：

你可以通过 js 来实现，或者对此进行媒体查询。请添加小提琴，我们可以提供帮助
@nol 所以没有内置的引导程序准备好的类？因为他们准备了这个 Button Group Justified css 组件，如果有很多按钮作为文本较长的单词，他们没有任何东西可以使其响应友好吗？这是我的小提琴：jsfiddle.net/kHW3V
这不应该被否决。他有代码和示例图片供参考。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

是的，如果你使用像这样的常规按钮组，它已经响应了

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

更新Fiddle

如果你必须有正当的，请告诉我！

【讨论】：

我真的想要按钮组对齐效果
如果使用 jquery 调整窗口大小，最简单的方法是删除对齐
不幸的是，当强制多行时，分组有点像废话