Bootstrap 響應式按鈕組對齊

Question

在 twitter bootstrap 3 中，有一個組件准備好的名稱按鈕組 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/

Answer 1

好吧，是的，如果您使用像這樣的常規按鈕組，它已經響應

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

更新小提琴

如果你必須有一個合理的讓我知道！

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-group-justified中的所有.btn添加此樣式。

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