我在使用小视口大小(768-992px)时遇到以下代码的问题。其他视口按预期工作。
在小尺寸时,我预计会有两排,每列四列;但是,我得到三行4列,2列和2列。
删除行<div class="clearfix visible-lg-md-block"></div>
可解决小视口大小的问题,但删除它会导致中大视口显示不均匀。
为什么我会以小尺寸获得三行,我能做什么,所以我只得到两行?
非常感谢你!
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" style="background-color:lavender;">
Column 1<br>
Resize the browser window to see the effect. Also try to remove the div clearfix line and see what happens.
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" style="background-color:lavenderblush;">Column 2</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" style="background-color:lightcyan;">Column 3</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" style="background-color:lightgray;">Column 4</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" style="background-color:beige;">Column 5</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" style="background-color:lightyellow;">Column 6</div>
<div class="clearfix visible-lg-md-block"></div>
<div class="clearfix visible-xs-block"></div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" style="background-color:plum;">Column 7</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" style="background-color:thistle;">Column 8</div>
</div>
</div>
答案 0 :(得分:1)
/* Defining Bootstrap grid */
The Bootstrap grid system has four classes:
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-6"> Demo </div>
/* Above code will give you 2 columns for small devices */
Refer : http://getbootstrap.com/examples/grid/
答案 1 :(得分:0)
参考:有帮助,
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
.row类,内部具有clearfix类的样式。
希望它可以帮到你, 谢谢!!!
答案 2 :(得分:0)
您是否尝试使用class="clearfix visible-md-block visible-lg-block"
?
您当前的代码获得:
您的结构预计会在-xs大小上产生3行!
您必须将所有col-xs-4
更改为col-xs-3
才能获得2行