调整大小时引导 6 到 3 列 [英] Bootstrap 6 to 3 columns when resize

问题描述

我尝试使用 Bootstrap 进行编码，但我有一些问题.我在一行中有 6 列 (6x1):

<div class="col-md-2 col-sm-2"></div><div class="col-md-2 col-sm-2"></div><div class="col-md-2 col-sm-2"></div><div class="col-md-2 col-sm-2"></div><div class="col-md-2 col-sm-2"></div><div class="col-md-2 col-sm-2"></div>

屏幕下降后，在第一个刹车点我想要 3x2:

<div class="col-md-4 col-sm-4"></div><div class="col-md-4 col-sm-4"></div><div class="col-md-4 col-sm-4"></div><div class="col-md-4 col-sm-4"></div><div class="col-md-4 col-sm-4"></div><div class="col-md-4 col-sm-4"></div>

然后当屏幕变得太小我想要 1x6

这是屏幕截图:

这可能吗?

解决方案

我认为这就是您所追求的:

<div class="col-md-2 col-sm-4 col-xs-12"></div><div class="col-md-2 col-sm-4 col-xs-12"></div><div class="col-md-2 col-sm-4 col-xs-12"></div><div class="col-md-2 col-sm-4 col-xs-12"></div><div class="col-md-2 col-sm-4 col-xs-12"></div><div class="col-md-2 col-sm-4 col-xs-12"></div>

bootply 示例

在中间断点及以上，您将所有 div 排成一行.在小断点处，您将有两行三列.在额外的小断点处，您将只有一列.

I trying to coding with Bootstrap, and I have some questions. I have 6 columns in one row (6x1):

<div class="row">
       <div class="col-md-2 col-sm-2"></div>
       <div class="col-md-2 col-sm-2"></div>
       <div class="col-md-2 col-sm-2"></div>
       <div class="col-md-2 col-sm-2"></div>
       <div class="col-md-2 col-sm-2"></div>
       <div class="col-md-2 col-sm-2"></div>
    </div>

After screens go down, on first brakepoint I want 3x2:

<div class="row">
       <div class="col-md-4 col-sm-4"></div>
       <div class="col-md-4 col-sm-4"></div>
       <div class="col-md-4 col-sm-4"></div>
       <div class="col-md-4 col-sm-4"></div>
       <div class="col-md-4 col-sm-4"></div>
       <div class="col-md-4 col-sm-4"></div>
    </div>

And after that when screen become too small I want 1x6

Here is screenshoot:

Is that possible?

解决方案

I think this is what you're after:

<div class="row">
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
</div>

bootply example

At the medium break point and above you'll have all the divs in one row. At the small break point you'll have two rows of three columns. At the extra small break point you'll have a single column.

这篇关于调整大小时引导 6 到 3 列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！