html - Bootstrap 3中如何为不同的设备设置不同的列

Question

我正在使用 Bootstrap3 设计网页。

该页面有 6 个缩略图。

• 对于桌面，我想每行显示 3 个缩略图(2 行)；
• 对于平板电脑，每行 2 个缩略图(3 行)；
• 对于手机，每行只有一个缩略图(6 行，垂直堆叠)。

Bootstrap3 中是否有一组简单的类来完成此任务。我不想为不同的设备隐藏/显示不同的 block 。我希望它具有真正的响应能力，并希望随着浏览器 width 的减小，列从 3 列折叠到 2 列再到单列。

这可能吗？

Answer 1

你可以使用:

• col-md-4，在桌面设备中每页 3thumbs
• col-sm-6 ，在小型设备中每页 2thumbs
• col-xs-12，用于超小型设备中的堆叠拇指

看看 Bootstrap docs

---

.row div:nth-of-type(2n+1) {
  background: red;
  height: 100px
}
.row div:nth-of-type(2n) {
  background: lightblue;
  height: 100px
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">.col-xs-12 .col-sm-6 .col-md-4</div>
    <div class="col-xs-12 col-sm-6 col-md-4">.col-xs-12 .col-sm-6 .col-md-4</div>
    <div class="col-xs-12 col-sm-6 col-md-4">.col-xs-12 .col-sm-6 .col-md-4</div>
    <div class="col-xs-12 col-sm-6 col-md-4">.col-xs-12 .col-sm-6 .col-md-4</div>
    <div class="col-xs-12 col-sm-6 col-md-4">.col-xs-12 .col-sm-6 .col-md-4</div>
    <div class="col-xs-12 col-sm-6 col-md-4">.col-xs-12 .col-sm-6 .col-md-4</div>
  </div>
</div>