执行多响应列时清除行 - 引导程序

Question

这个标题可能不是很准确,但情况如下:

正如您在HTML中看到的那样,网格系统从xl屏幕上的4个图像到 lg屏幕上的3 个图像到2个更少的图像.

我试图让它正确显示 - 每个屏幕尺寸的适当数量的图像,即.然而,一些时髦的东西正在发生,并且无法使用bootstraps类来解决它.

在我看来,我必须在每个断点处动态添加行.

有什么建议？

- 更新 - 刚刚意识到col-xl-*不存在.但是,这根本不会改变这种情况.请忽略xl声明.

- 更新2 - 更新的图像.

- 更新3 - 我会尽力澄清我的目标.对于我帖子中附带的特定图像,我希望每行显示3个框 - 不是所有的helter skelter.

当它每行折叠到2个盒子(xs设备)时,我想确保每行有2个盒子.

Answer 1

用这个css扩展你的bootstrap.css:

@media (min-width:1200px){
    .auto-clear .col-lg-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-lg-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-lg-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-lg-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-lg-6:nth-child(odd){clear:left;}
}
@media (min-width:992px) and (max-width:1199px){
    .auto-clear .col-md-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-md-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-md-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-md-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-md-6:nth-child(odd){clear:left;}
}
@media (min-width:768px) and (max-width:991px){
    .auto-clear .col-sm-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-sm-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-sm-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-sm-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-sm-6:nth-child(odd){clear:left;}
}
@media (max-width:767px){
    .auto-clear .col-xs-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-xs-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-xs-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-xs-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-xs-6:nth-child(odd){clear:left;}
}

使用它像:

<div class="row auto-clear">
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
        <p>Hey</p>
    </div>
</div>

注意:这需要使用所有col-size并且所有cols都具有相同的大小.

Answer 2

我通过添加clearfix它们应该存在的元素来解决这个问题.我想要3列md和2列sm,这就是我做的方式:

<div class="row">
    <div class="col-sm-6 col-md-4"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="clearfix visible-sm"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="clearfix visible-md"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="clearfix visible-sm"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="clearfix visible-md"></div>
    <div class="clearfix visible-sm"></div>
    <div class="col-sm-6 col-md-4"></div>
</div>

所以我clearfix visible-sm在每第二个div clearfix visible-md之后和每第三个div之后使用.我觉得这个解决方案并不理想,但效果相当好.

编辑: 从Bootstrap v3.2.0开始.visible-*,不推荐使用类.

http://getbootstrap.com/css/#responsive-utilities:

类.visible-xs,.visible-sm,.visible-md和.visible-lg也存在,但从v3.2.0开始不推荐使用.除了与切换相关元素的其他特殊情况外,它们大致相当于.visible - * - block.

编辑2:只要您不想编辑CSS,此解决方案就可以工作,如果您可以选择这样做,我建议您使用Jonas的答案,因为在我看来它更简单.

Answer 3

使用自举变量的.scss修复,取自@ jonas和@yog

@mixin row-first-child($col-type) {
  .col-#{$col-type}- {
    &1:nth-child(12n+1),
    &2:nth-child(6n+1),
    &3:nth-child(4n+1),
    &4:nth-child(3n+1),
    &6:nth-child(odd){
      clear: left;
    }
  }
} 

.auto-clear {
  @media (min-width: $screen-lg-min){
    @include row-first-child(lg);
  }
  @media (min-width: $screen-md-min) and (max-width: $screen-md-max){
    @include row-first-child(md);
  }
  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max){
    @include row-first-child(sm);
  }
  @media (max-width: $screen-xs-max){
    @include row-first-child(xs);
  }
}