Bootstrap 6 to 3 columns when resize

余生长醉 提交于 2021-02-11 08:12:29

问题


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: enter image description here

Is that possible?


回答1:


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.



来源:https://stackoverflow.com/questions/28459664/bootstrap-6-to-3-columns-when-resize

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!