当包装在.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>
原文地址:https://www.jb51.cc/html/231528.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。