Bootstrap 响应式 - 在移动设备上查看时忽略“spanX”答案

【问题标题】：Bootstrap responsive - Ignore 'spanX' when viewing on mobileBootstrap 响应式 - 在移动设备上查看时忽略“spanX”
【发布时间】：2013-05-18 21:41:09
【问题描述】：

假设我有一个使用 Twitter Bootstrap 并包含响应功能的网站。在此示例中，我有一个 div，其中一个 div 中的图片以 span1 为类，而一些文本在一个以 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 的内容会跨越页面的整个宽度（假设它是在手机上查看的），还是只会跨越页面上 12 个空格中的 11 个？引导网格？如果是这种情况，我如何指定我希望span11 中的段落跨越页面的整个宽度，而不仅仅是网格定义的 12 个空格中的 11 个？ p>

【问题讨论】：

标签： css twitter-bootstrap responsive-design

【解决方案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

【讨论】：

感谢您的全面回答，这正是我想要的:)