css - Bootstrap clearfix 无法按预期工作

Question

在小视口(viewport)尺寸 (768-992px) 下，我在使用下面的代码时遇到了一些问题。其他视口(viewport)按预期工作。

在小尺寸的情况下，我希望每行四列；但是，我得到三行 4、2 和 2 列。

删除行 <div class="clearfix visible-lg-md-block"></div>解决了小视口(viewport)尺寸的问题，但移除它会导致中型和大型视口(viewport)显示不均匀。

为什么我在小尺寸时得到三行，我该怎么做才能得到两行？

非常感谢!

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

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