如何在 Bootstrap 3 中为不同的设备设置不同的列答案

【问题标题】：How to set different columns for different devices in Bootstrap 3如何在 Bootstrap 3 中为不同的设备设置不同的列
【发布时间】：2016-09-25 22:57:07
【问题描述】：

我正在用 Bootstrap3 设计一个网页。

该页面有 6 个缩略图。

对于台式机，我想每行显示 3 个缩略图（2 行）；
对于平板电脑，每行 2 个缩略图（3 行）；
对于手机，每行只有一个缩略图（6 行，垂直堆叠）。

Bootstrap3 中是否有一组简单的类来完成此操作。我不想为不同的设备隐藏/显示不同的块。我希望这是真正的响应式，并且希望列从 3 列折叠到 2 列再到单列，因为浏览器 width 减少了。

这可能吗？

【问题讨论】：

col-md-4, col-sm-6, col-xs-12.
感谢大家的建议。我刚刚在我的页面上实施了您的建议-hurtigruten.in/r-index.php您可以在您的手机/平板电脑上正确查看它吗？非常感谢您的反馈

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

你可以使用：

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

看看引导程序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>

【讨论】：

我认为在第三个和第四个单元格之间添加一个块<div class="clearfix visible-md"></div> 是正确的。
如果你测试它，你会发现不需要
我明白了。这是因为您使用height: 100px。但是你为什么加了<div class="clearfix visible-sm"></div>？
@GlebKemarsky 你是对的，在我删除clearfix div 之前，它具有相同的height，现在我删除了它，我修复了 CSS。（顺便说一句，我是通过电话回复的）
@GlebKemarsky 感谢您的建议。我添加了clearfix，它解决了这个问题。没有它，它只会在桌面的第二行显示一个缩略图。

【解决方案2】：

Grid options: col-xs-12 在手机上占据一整排； col-sm-6 在平板电脑上占了一半； col-md-4 占桌面行的三分之一。
如果缩略图具有不同的高度，则第二行可以捕捉其中一个并比必要的更早开始。为避免这种情况，请在开始新行之前we add a classclearfix。
我们需要两排平板电脑和三排桌面电脑。因此，我们必须在不同宽度的屏幕上使用具有clearfix 类的不同块。 visible-sm-block、visible-md-block 和 visible-lg-block 类是 toggling content across viewport breakpoints。
类为img-responsivescales nicely to the parent element的图像。

.thumbnails img {
  margin: 10px auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container">
  <div class="row thumbnails">
    <div class="col-xs-12 col-sm-6 col-md-4"><img src="http://placehold.it/300x400/c69/" class="img-responsive" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4"><img src="http://placehold.it/320x380/9c6/" class="img-responsive" alt=""></div>
    <div class="clearfix visible-sm-block"></div>
    <div class="col-xs-12 col-sm-6 col-md-4"><img src="http://placehold.it/340x360/69c/" class="img-responsive" alt=""></div>
    <div class="clearfix visible-md-block visible-lg-block"></div>
    <div class="col-xs-12 col-sm-6 col-md-4"><img src="http://placehold.it/360x340/c69/" class="img-responsive" alt=""></div>
    <div class="clearfix visible-sm-block"></div>
    <div class="col-xs-12 col-sm-6 col-md-4"><img src="http://placehold.it/380x320/9c6/" class="img-responsive" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4"><img src="http://placehold.it/400x300/69c/" class="img-responsive" alt=""></div>
  </div>
</div>

【讨论】：