html – Bootstrap 4阶类砌体状的列卡水平而不是垂直

前端之家收集整理的这篇文章主要介绍了html – Bootstrap 4阶类砌体状的列卡水平而不是垂直前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当包装在.card-columns中时,是否可以从左到右订购Bootstrap 4卡?

从上到下(默认):

1 3 5
2 4 6

左到右:

1 2 3
4 5 6

由于高度的变化,我需要使用类似砌体的网格.

解决方法

CSS列的顺序是从上到下,然后从左到右,所以渲染列的顺序将是..
1  3  5
2  4  6

无法更改CSS列的顺序.建议您使用像砌体这样的其他解决方案. https://github.com/twbs/bootstrap/issues/17882

此外,启用flexbox won’t help因为Bootstrap卡片组使用CSS列(而不是flexBox)进行砌体效果.但是,您可以使用卡片组和弹性箱来获得相同高度的卡片:http://www.codeply.com/go/YFFFWHVoRB

另一个选择是使用grid along with flexbox而不是卡片组:

您可以使用新的d-flex类到eliminate the extra CSS

<div class="col-sm-4 d-flex pb-3">
    <div class="card card-block">
        Card. I'm just a simple card-block.
    </div>
</div>

有关:
How do I make card-columns order horizontally?

原文链接:https://www.f2er.com/html/231528.html

猜你在找的HTML相关文章