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

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

这是响应式网格的预期行为,您可以在调整屏幕大小时看到引导文档页面(特别是脚手架演示)上发生的相同效果.你可以通过创建自己的类来包含span你希望在移动设备上并排放置的标签来解决这个问题.我们可以通过将其包装到应该在具有屏幕尺寸的移动设备上触发的媒体查询来完成它. 480px或更低(又称iphone),这样它不会影响桌面响应网格,直到达到该约束.

CSS

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

演示,尝试在您的移动设备上查看此演示,http://jsfiddle.net/r5VCy/1/show/.

Answer 3

只是想添加到Bootstrap 3上的注释.我有过相同的问题,包括过早的列,而不是保持它们的宽度足够长("col-lg-6"每个"启动器模板"示例).将它改为"col-sm-6"就可以了 - 每种尺寸的参考都在这里:

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