twitter-bootstrap – 防止流体柱在iPhone屏幕上断开到新行

发布时间：2020-12-18 00:06:26 所属栏目：安全来源：网络整理

导读：我正在我的第一个Bootstrap项目，有点卡

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

解决方法

这是响应网格的预期行为，您可以看到在调整屏幕大小时在引导文档页面(特别是 scaffolding演示)上发生的相同效果。您可以通过创建自己的类来包含在移动设备上并排放置的span标记内，从而解决这个问题，我们可以将其包装到媒体查询中，以便在具有屏幕的移动设备上触发大小为480px或更低(aka，一个iphone)，这种方式，它不会影响桌面响应网格，直到它达到该约束。

CSS

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!