Boostrap 3流体网格布局问题；长物品会导致堆叠问题

lagweezle 发表于 Dev

拉格韦兹勒

这与Bootstrap 3的流体网格布局问题非常相似吗？和Bootstrap响应度视图，但砌石和同位素的选项虽然很吸引人，但却不是一个选项，因为我必须保留这些元素的顺序。

从链接的问题中，我已经使用clearfix类应用程序向前迈出了相当大的步伐，如http://bootply.com/103688所示。clearfix div不缩进，因此更加突出。

我还发现，如果像我一样，仅使用某些列大小（xs，md，lg），则会出现不良结果。这就要求clearfix还必须指定visible-sm，或者，当视口达到“小”尺寸时，clearfix将不再可见，并且有问题的堆叠会再次发生。

应用它们非常简单，因为这是现实中的fizzbuzz问题，但似乎是抗DRY的。有没有一种更清洁的方法可以减少重复的clearfix标签呢？使浏览器（CSS）计算应在何处应用clearfix的某些方法？

加布里埃拉（Gabriela Gabriel）

您可以使用手动方法根据每个断点的元素数来创建行。例如：

如果您的行仅包含2个元素：

@media(max-width: @screen-tablet){
    // create rows (clearfix)
    .col-xs-6:nth-of-type(odd){ clear:left; }
}

或者您的行包含4个元素

@media(min-width: @screen-tablet) and (max-width: @screen-desktop){
    // create rows (clearfix)
    .col-sm-4:nth-of-type(3n+1){ clear:left; }
}

等等..

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-03-14

0 条评论

登录后参与评论