twitter-bootstrap - Bootstrap ボタンは、レスポンシブ デザインで整列して流れます

Question

私のボタン グループは、ワイド スクリーン (コンピュータの LCD) と水平レイアウトで完璧に見えます。

また、縦向きのレイアウトでは見苦しくなります (または、コンピューターのブラウザーのサイズが大幅に変更された場合):

コードは次のとおりです（ドロップダウンメニューの部分を切り取ってください）：

<div class="well well-small">

    <a id="btnInfo" href="#" class="btn btn-primary">Device Info</a>

    <a id="btnAcrid" href="#" class="btn btn-info">Acrid Blog</a>

    <div class="btn-group">
      <a class="btn dropdown-toggle btn-inverse" data-toggle="dropdown" href="#">
        Dropdown
        <span class="caret"></span>
      </a>
    </div>

</div>

このような問題を回避するためのベストプラクティスは何ですか? 私の頭に浮かぶ唯一のことは、.visible-phoneたとえば次のように Boostrap クラスを使用することです。

<div style="margin: 5px" class="visible-phone"></div>

しかし、私は、この事件を解決するためのより専門的な方法があるに違いないと強く感じています.

編集:示されているようにボタン セットのソリューションを探しています。したがって、ブロック ボタンを使用することはできません。ポートレートでは見苦しく (画面全体に長く)、.btn-blockドロップダウンでは機能しないようです。

Answer 1

class="btn-block"電話レイアウトのボタンに を追加できます。したがって、それらが 100% 幅で連続して表示されます。

ここを見てください： http://twitter.github.io/bootstrap/base-css.html#buttons