1

假设我有一个使用 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 会隐藏，但span11div 仍然可见。

如果我使用此代码，内容将span11跨越页面的整个宽度（假设它正在手机上查看），还是仅跨越 Bootstrap 网格上 12 个空间中的 11 个？如果是这种情况，我如何指定我希望该段落span11跨越页面的整个宽度，而不仅仅是网格定义的 12 个空格中的 11 个？

4

1 回答 1

1

它将跨越整个宽度。

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

这是执行此操作的代码：

[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);
  }

资料来源：Bootstrap 移动布局 .less 文件，第 60 行

于 2013-05-23T13:48:12.197 回答