javascript - 如何使用 bootstrap 3 在移动设备上使用全宽，但在桌面设备上保留侧边距？

Question

有没有办法在桌面分辨率下保持页面的侧边距(如 .container 行为)，但在平板电脑和手机尺寸中使用 Bootstrap 3 中页面的完整宽度(就像 .container-fluid 行为)？

Answer 1

如果我正确理解了您的需求，我认为您并不是在寻找“.container-fluid”行为(他们已在 v3.1 中重新添加了此行为)，但您更希望设计移动设备/桌面不同。

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

示例如下: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-# <768px
.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 中的一些文本(这将占据移动设备宽度的整行)

假设 |<-- 12 列 -->| 在您的桌面上，它更像是这样:

|<-------- 框 #1 中的一些文本 --------><-------- 框 #2 中的一些文本 ------- ->|

因为:|<-- 6 列 -->|<-- 6 列 -->|

移动设备会更像这样:

|<-------- 12 -------->|
|<-------- 12 -------->|

|<-------- 框 #1 中的一些文本 -------->|
|<-------- 框 #2 中的一些文本 -------->|