boostrap clearfix 未按预期工作 [英] boostrap clearfix not working as expected

问题描述

在小视口尺寸 (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 未按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！