Question

我多次遇到这个问题而且找不到合适的解决方案。基本上我有一个带有2列并排文本的引导网格（可以说是4行）。如果网格中的某个项目具有较大的文本，则网格会断开，并且不会在正确的位置显示以下元素。

Here is the example。您可以看到它在电话支持下断开（如果您在col-md＆gt;屏幕中看到它）

我的解决方案是将项目的最小高度设置为较大文本的最大高度，并以这种方式工作，但它不是最佳解决方案。有什么想法吗？

Answer 1

您可以在元素

之后设置类清除修复

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

例如

＆＃13;

//sass file

//this code set two element in a row

.clearfix{
  &:nth-of-type(n){
    display: none;
  }

  &:nth-of-type(4n){
    display: block;
  }
}

＆＃13;

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

＆＃13;

文本很大时引导网格中断

1 个答案: