Question

我正在开发我的第一个Bootstrap项目并且有点卡住了。在页面顶部，我想要左侧的徽标和右侧的2个按钮叠加在一起。这就是我到目前为止所做的：

<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列断开并显示在下一行。有没有办法改写这个？

Answer 1

在Bootstrap 3中，有一组新的脚手架CSS类，它们包含的功能允许您在较小的屏幕上禁用堆叠。

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

Answer 2

这是响应式网格的预期行为，您可以在调整屏幕大小时看到引导文档页面（特别是scaffolding演示）上发生的相同效果。您可以通过创建自己的类来包含此内容，以便在移动设备上并排放置span标记，我们可以通过将其包装到应在移动设备上触发的媒体查询来实现此目的。屏幕尺寸为480px或更低的设备（也称为iphone），这样它就不会影响桌面响应网格，直到达到该约束。

<强> CSS

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

Demo，请尝试在移动设备上查看此演示http://jsfiddle.net/r5VCy/1/show/。

Answer 3

只想添加到Bootstrap 3的注释中。我的列包裹太早而且没有保持足够长的宽度（“启动器模板”示例中的“col-lg-6”）也存在同样的问题。将它改为“col-sm-6”就可以了 - 每种尺寸的参考都在这里：

http://getbootstrap.com/css/#responsive-utilities

在iPhone屏幕上防止流体柱破裂到新线

3 个答案: