Question

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

该页面有6个缩略图。

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

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

这可能吗？

Answer 1

你可以使用：

col-md-4，桌面设备每页3thumbs
col-sm-6，小型设备中每页2张;
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>

Answer 2

Grid options：col-xs-12在手机上占据了一席之地; col-sm-6占据平板电脑的一半; col-md-4占桌面上行的三分之一。
如果缩略图的高度不同，则第二行可以捕获其中一个，并在必要时提前开始。为避免这种情况，请在开始新行之前we add a class clearfix。
平板电脑需要两行，桌面需要三行。因此，我们必须在具有不同宽度的屏幕上使用具有类clearfix的不同块。课程visible-sm-block，visible-md-block和visible-lg-block为toggling content across viewport breakpoints。
包含课程img-responsive scales 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>

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

2 个答案: