twitter-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

您可以将 a 添加class="btn-block"到电话布局的按钮中。因此，您将连续看到它们 100% 的宽度。

看这里：http: //twitter.github.io/bootstrap/base-css.html#buttons