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>

解决此类问题的最佳做法是什么？我想到的唯一一件事就是使用Boostrap类.visible-phone，例如：

<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