且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

调整大小时引导 6 到 3 列

更新时间:2023-12-01 09:30:40

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

<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.