css - 当文本很大时 Bootstrap 网格中断

Question

这个问题我遇到过好几次了，一直找不到合适的解决办法。 基本上我有一个 Bootstrap 网格，其中有 2 列与文本并排(可以说是 4 行)。 如果网格中的其中一项具有大文本，则网格会中断并且不会在正确位置显示以下元素。

Here is the example .您可以在电话支持下看到它中断(如果您在 col-md > 屏幕中看到它)

我的解决方案是将元素的最小高度设置为较大文本的最大高度，这样就可以了，但这不是最佳解决方案。 有什么想法吗？

Answer 1

你可以在你的元素之后设置class clear fix

你可以在你的媒体中设置哪一个连续设置

例如

//sass file

//this code set two element in a row

.clearfix{
  &:nth-of-type(n){
    display: none;
  }

  &:nth-of-type(4n){
    display: block;
  }
}

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <a href="#">
        <img src="" alt="" />
      </a>						
    </div>
    <div class="clearfix"></div>
    <div class="col-sm-4">
      <a href="#">
        <img src="" alt="" />
      </a>
    </div>
    <div class="clearfix"></div>
    <div class="col-sm-4">											
      <a href="#">
        <img src="" alt="" />
      </a>									
    </div>
    <div class="clearfix"></div>
  </div>
</div>