Twitter bootstrap 防止液柱断裂到iPhone屏幕上的新线

我正在做我的第一个引导项目，有点卡住了。在页面的顶部，我希望在左侧有一个徽标，在右侧有两个按钮堆叠在一起。这就是我到目前为止所做的：

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4">
      <img src="/img/logo.png" width="120" />
    </div>
    <div class="span8">
      <a class="btn btn-large" href="#" style="width:100%;"><i class="icon-map-marker"></i> Find Location</a><br />
      <a class="btn btn-large" href="#" style="width:100%;"><i class="icon-comment"></i> Call Now</a>    
    </div>
  </div>
</div>

---

它在桌面上可以正常工作，但在iPhone上，span8列中断并出现在下一行。有什么方法可以替代这个吗？

这是响应网格的预期行为，当您调整屏幕大小时，您可以在引导文档页面（特别是在演示中）上看到同样的效果。您可以通过创建自己的类来克服这一问题，该类包含在移动设备上要并排保留的

span

标记中，我们可以将其包装到媒体查询中，该查询应在屏幕大小为480px或以下的移动设备（又称iphone）上触发，这样，在达到该约束之前，它不会影响桌面响应网格

CSS

@media all and (max-width: 480px)  {
    .half {
        float: left !important;
        width: 50% !important;
    }
}

---

，尝试在您的移动设备上查看此演示。

在Bootstrap 3中，有一组新的CSS类用于搭建，它们包括允许您在较小屏幕上禁用堆叠的功能

---

新的CSS命名法使用“列”而不是“跨度”，它们有很多种类。“col xs-”种类（超小型）允许您设置一个即使在超小型设备上也不会堆叠的网格。

只想添加到Bootstrap 3的说明中。我也遇到过同样的问题，即列包装太早，宽度不够长（“根据“初学者模板”示例，col-lg-6”）。将其更改为“col-sm-6”完成了操作-每个尺寸的参考如下：