本文介绍了boostrap clearfix 未按预期工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在小视口尺寸 (768-992 像素) 下，我在使用下面的代码时遇到了一些问题.其他视口按预期工作.
在小尺寸时，我希望每行四列；但是，我得到了三行 4、2 和 2 列.
删除行 <div class="clearfix visible-lg-md-block"></div> 解决了小视口尺寸的问题，但它的删除会导致中大视口显示不均匀.
为什么我在小尺寸时会得到三行，我该怎么做才能得到两行?
非常感谢！
<div class="row"><div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" style="background-color:lavender;">第1栏调整浏览器窗口大小以查看效果.还尝试删除 div clearfix 行，看看会发生什么.
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" style="background-color:lavenderblush;">第2列</div><div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" style="background-color:lightcyan;">第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;">第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;">第5列</div><div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" style="background-color:lightyellow;">第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;">第7列</div><div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" style="background-color:thistle;">第8列</div>
解决方案
您是否尝试使用 class="clearfix visible-md-block visible-lg-block" 代替?
您当前的代码获取:
- -lg: 1,33 行
- -md: 1,33 行
- -sm: 2 行
- -xs:2,66 行
您的结构预计将在 -xs 大小上生成 3 行！
您必须将所有 col-xs-4 更改为 col-xs-3 以获得 2 行
I'm having some trouble with the code below when in the small viewport size (768-992px). The other viewports work as expected.
At the small size I would expect two rows of four columns each; however, I am getting three rows of 4, 2, and 2 columns.
Removing the line <div class="clearfix visible-lg-md-block"></div> solves the problem at the small viewport size, but its removal creates causes an uneven display at the medium and large viewports.
Why am I getting three rows at the small size and what can I do so I only get two?
Thank you so much!
<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>
解决方案
Did you try using class="clearfix visible-md-block visible-lg-block" instead?
Your current code gets:
- -lg: 1,33 rows
- -md: 1,33 rows
- -sm: 2 rows
- -xs: 2,66 rows
Your structure is expected to produce 3 rows on -xs size!
You must change all col-xs-4 to col-xs-3 to get 2 rows
这篇关于boostrap clearfix 未按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
