Question

有没有办法在桌面分辨率上保持页面边缘（如.container行为），但在平板电脑和手机大小中使用bootstrap 3中页面的整个宽度（如{{ 1}}行为）？

Answer 1

如果我理解你的需要，我认为你不是在寻找＆＃34; .container-fluid＆＃34;行为（他们已经从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-＃＆lt; 768px
.col-sm-＃＆gt; 768px
.col-md-＃＆gt; 992px
.col-lg-＃＆gt; 1200像素

所以说对于移动设备，你喜欢宽度为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中的一些文字（这将占用您移动宽度的整行）

假设|＆lt; - 12列 - ＆gt; | 在桌面上，它更像是这样：

|＆lt; --------框＃1中的一些文字--------＆gt;＆lt; --------框＃2中的一些文字---- ----＆GT; |

因为：|＆lt; - 6列 - ＆gt; |＆lt; - 6列 - ＆gt; |

移动将更像是这样：

|＆lt; -------- 12 --------＆gt; |
|＆lt; -------- 12 --------＆gt; |

|＆lt; --------框＃1中的某些文字--------＆gt; |
|＆lt; --------框＃2中的一些文字--------＆gt; |

Answer 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

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

2 个答案: