引导程序 clearfix 无法按预期工作答案

【问题标题】：boostrap clearfix not working as expected引导程序 clearfix 无法按预期工作
【发布时间】：2015-10-17 05:15:36
【问题描述】：

在较小的视口尺寸 (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>

【问题讨论】：

您希望.clearfix 做什么？它将清除浮动元素，并添加一个可见类将使其仅适用于我认为的特定屏幕宽度
我不认为class="clearfix visible-lg-md-block" 是有效的CSS，我需要的是class="clearfix visible-md-block visible-lg-block"。

标签： css twitter-bootstrap twitter-bootstrap-3 clearfix

【解决方案1】：

参考这个：它有帮助，

http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

.row 类，内部有 clearfix 类的样式。

希望对你有帮助谢谢！！！

【讨论】：

【解决方案2】：

您是否尝试改用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 行

【讨论】：

【解决方案3】：

/* 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/

【讨论】：