Question

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

<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的内容将跨越整个页面宽度（假设它是在移动电话上查看），还是只会跨越12个空格中的11个在Bootstrap网格上？如果是这种情况，我如何指定我希望span11中的段落跨越页面的整个宽度而不仅仅是网格定义的12个空格中的11个？

Answer 1

它将跨越整个宽度。

Bootstrap的css转换所有带span*类的元素，以阻止屏幕宽度小于767px的设备的宽度为100％的元素;因此，移动设备并没有真正的“网格”。

这是执行此操作的代码：

[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

Bootstrap响应 - 忽略＆＃39; spanX＆＃39;在手机上观看时

1 个答案: