30

我正在做我的第一个 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 列中断并出现在下一行。有没有办法覆盖这个？

4

3 回答 3

25

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

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

于 2013-11-19T20:22:55.797 回答
23

这是响应式网格的预期行为，当您调整屏幕大小时，您可以在引导文档页面（特别是脚手架演示）上看到相同的效果。您可以通过创建自己的类来克服这个问题，以将其包含在span您希望在移动设备上并排保存的标签中，我们可以通过将其包装到应该在具有屏幕大小的移动设备上触发的媒体查询中来完成它480px 或以下（又名 iphone），这样在达到该约束之前它不会影响桌面响应网格。

CSS

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

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

于 2012-04-24T23:10:09.047 回答
7

只是想添加到 Bootstrap 3 上的注释。我遇到了同样的问题，即列包装太早并且没有保持它们的宽度足够长（“启动模板”示例中的“col-lg-6”）。将其更改为“col-sm-6”就可以了 - 每个尺寸的参考都在这里：

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

于 2013-12-12T00:02:57.627 回答