如何在 Bootstrap 3 中为不同的设备设置不同的列 [英] How to set different columns for different devices in Bootstrap 3

问题描述

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

该页面有 6 个缩略图.

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

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

这可能吗?

解决方案

你可以使用:

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

看看引导程序文档

<小时>

.row div:nth-of-type(2n+1) {背景:红色；高度:100px}.row div:nth-of-type(2n) {背景:浅蓝色；高度:100px}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="样式表"/><div class="容器"><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>

I am designing a web page in Bootstrap3.

The page has 6 thumbnails.

• For desktops, I want to display 3 thumbnails per row (in 2 rows);
• For tablets, 2 thumbnails per row (in 3 rows);
• For mobiles, just one thumbnail per row (in 6 rows, stacked vertically).

Is there a simple set of classes in Bootstrap3 to accomplish this. I don't want to hide/show different blocks for different devices. I want this to be truly responsive, and want the columns to collapse from 3 columns to 2 columns to a single column, as the browser width reduces.

Is this possible?

解决方案

you can use:

• col-md-4, for 3thumbs per page in desktop device
• col-sm-6 ,for 2thumbs per page in small devices
• col-xs-12, for stacked thumbs in extra small devices

Take a look at 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>

这篇关于如何在 Bootstrap 3 中为不同的设备设置不同的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！