如何在移动设备上使用全宽，但在桌面设备上使用 bootstrap 3 保持边距？答案

【问题标题】：How to use full width on mobile devices, but keep side margins on desktop devices with bootstrap 3?如何在移动设备上使用全宽，但在桌面设备上使用 bootstrap 3 保持边距？
【发布时间】：2014-03-13 02:02:42
【问题描述】：

有没有办法以桌面分辨率保持页面的边距（如.container 行为），但在平板电脑和手机尺寸中使用引导程序 3 中页面的全宽（如.container-fluid 行为)?

【问题讨论】：

标签： javascript html css twitter-bootstrap-3

【解决方案1】：

如果我正确理解了您的需求，我认为您不是在寻找“.container-fluid”行为（他们已在 v3.1 中添加了此行为），但更多的是您正在寻找设计移动设备/desktop 不同。

该示例将说明它是如何完成的。通过调整浏览器宽度来查看它的实际效果。

此处示例：http://getbootstrap.com/css/#grid-example-mixed-complete

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

使用适合您需要的类前缀。

.col-xs-# .col-sm-# > 768px
.col-md-# > 992px
.col-lg-# > 1200px

假设对于移动设备，您希望宽度为屏幕的 100%，但对于桌面设备，您希望 2 列显示为一列。

所以你可以这样做：

<div class="row">
  <div class="col-xs-12 col-md-6">
    Some Text in box #1
  </div>
  <div class="col-xs-12 col-md-6">
    Some Text in box #2
  </div>
</div>

这就是它在手机上的样子：

#1 框中的一些文本（这将占据您的移动宽度的整行）框 #2 中的一些文本（这将占据您的移动宽度的整行）

假设 || 在您的桌面上，它会更像这样：

因为：|||

移动端会更像这样：

||
||

【讨论】：

您能否详细说明最后一部分？这些像素值是什么意思？那些是宽度变为 100% 的点吗？

【解决方案2】：

当屏幕宽度小于 768 像素（最小设备）时，Bootstrap 3.1 container 变为全宽：http://www.bootply.com/121222

如果您希望container 更快地变为全宽（在更宽的屏幕宽度上），您可以使用媒体查询来获取您希望成为阈值的任何宽度。例如，这会将其更改为小于 992 像素的任何宽度的全宽：

@media (max-width:992px) {
    .container {
        width: 100%;
    }
}

演示：http://www.bootply.com/121224

【讨论】：