css - Bootstrap 响应 - 在移动设备上查看时忽略 'spanX'

Question

假设我有一个使用 Twitter Bootstrap 并包含响应功能的网站。在这个例子中，我有一个 div，在一个以 span1 为类的 div 中有一张图片，在一个以 span11 为类的 div 中有一些文本。我不想在通过手机查看网站时显示图像。这是我将使用的代码:

<div class="row-fluid">
  <div class="span1 hidden-phone">
    <img src="path/to/image">
  </div>

  <div class="span11">
    <p>Here is some text</p>
  </div>
</div>

在此示例中，如果通过手机访问网站，span1 div 将被隐藏，但 span11 div 仍然可见。

如果我使用这段代码，span11 的内容是否会跨越整个页面宽度(假设它是在手机上查看的)，还是仍然只跨越 11 个宽度Bootstrap 网格上的 12 个空格？如果是这种情况，我如何指定我希望 span11 中的段落跨越 页面的整个宽度 而不仅仅是 12 个空格中的 11 个由网格？

Answer 1

它将跨越整个宽度。

Bootstrap 的 css 将所有具有 span* 类的元素转换为对于屏幕宽度小于 767px 的设备具有 100% 宽度的 block 元素>;因此，并没有真正的移动“网格”。

这是执行此操作的代码:

[class*="span"],
.uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing
.row-fluid [class*="span"] {
    float: none;
    display: block;
    width: 100%;
    margin-left: 0;
    .box-sizing(border-box);
  }

来源:The Bootstrap mobile layout .less file, line 60