防止流体列在 iPhone 屏幕上换行 [英] Prevent fluid columns from breaking to new line on iPhone screen

问题描述

我正在做我的第一个 Bootstrap 项目，但有点卡住了.在页面顶部，我希望左侧有一个徽标，右侧有 2 个按钮堆叠在一起.这是我目前所拥有的:

<div class="row-fluid"><div class="span4"><img src="/img/logo.png" width="120"/>
<div class="span8"><a class="btn btn-large" href="#" style="width:100%;"><i class="icon-map-marker"></i>查找位置
<a class="btn btn-large" href="#" style="width:100%;"><i class="icon-comment"></i>立即致电

它在桌面上按预期工作，但我在 iPhone 上，span8 列中断并出现在下一行.有什么办法可以覆盖这个吗?

解决方案

这是响应式网格的预期行为，您可以在引导程序文档页面上看到相同的效果(特别是在 scaffolding 演示)当您调整屏幕大小时.您可以通过创建自己的类来解决这个问题，将其包含在您希望在移动设备上并排放置的 span 标签中，我们可以通过将其包装到应该触发的媒体查询中来解决这个问题在屏幕尺寸为 480 像素或以下的移动设备(又名 iPhone)上，这样在达到该限制之前它不会影响桌面响应式网格.

CSS

@media all and (max-width: 480px) {.一半 {浮动:左！重要；宽度:50%！重要；}}

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

I am working on my first Bootstrap project and am a little stuck. At the top of the page, I want a logo on the left side and 2 buttons on the right side stacked on top of each other. This is what I have so far:

<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>

It works as expected on a desktop, but I on the iPhone, the span8 column breaks and appears on the next line. Is there any way to override this?

解决方案

That is the expected behavior of the responsive grid, you can see the same effect happening on the bootstrap documentation page (specially on the scaffolding demo) when you resize the screen. You can overcome this by creating your own class to include inside the span tags you want to keep side by side on a mobile device and we can top it off by wrapping it into a media query that should be triggered on a mobile device with a screen size of 480px or below (aka, an iphone), this way it won't affect the desktop responsive grid until it reaches that constraint.

CSS

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

Demo, try viewing this demo on your mobile device, http://jsfiddle.net/r5VCy/1/show/.

这篇关于防止流体列在 iPhone 屏幕上换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！