当前位置: 首页 > 面试题库 >

Bootstrap 4阶砌体式列卡水平而不是垂直

姜飞飙
2023-03-14
问题内容

包裹时是否可以从左到右订购 Bootstrap 4卡.card-columns

从上到下(默认):

1 3 5
2 4 6

左到右:

1 2 3
4 5 6

由于高度不同,我有必要使用类似砌体的网格。


问题答案:

CSS列的顺序是从上到下,然后是从左到右,因此呈现的列的顺序是。

1  3  5
2  4  6

无法更改CSS列的顺序。建议您使用其他解决方案,

同样,启用flexbox也无济于事,因为Bootstrapcard-deck使用CSS列(不是flexbox)来实现砌体效果。但是,您可以将card-deckandflexbox用于等高卡 :

另一种选择是将网格与flexbox一起使用,而不是card-deck

您可以使用新d-flex类消除多余的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>


 类似资料:
  • 问题内容: 我正在尝试仅使用CSS和flexbox创建水平砌体布局。我遇到的问题是元素之间存在垂直间隙,而没有使用它可以缩小间隙吗? 问题答案: 这是一个使用换行列的选项,但它需要固定的高度。

  • 问题内容: 我如何使列表彼此相邻(水平)而不是向下(垂直)。 例: 一月(这就是我不断得到的)SMTWTFS 1 2 3 4 5 … 一月(这就是我想要得到的)SMTWTFS 1 2 3 4 5 6 7 8 9 … 谢谢您的帮助,我是新手,无法解决。:) 问题答案: 用 : 代替 : 并且不要忘记添加一个 最后冲洗缓冲区。

  • 我有一个由我的WordPress主题提供的社交类如下,它垂直放置: 我正在尝试将此列表放置在一条水平线上 但我被困住了。有人有主意吗?

  • 问题内容: 我有一张智能滚动的卡片清单,虽然我喜欢的外观,但令人沮丧的是它的排列顺序从上到下,如下所示: 对于内容加载量超过几个项目的任何事物,这种垂直排序似乎基本上没有用。如果我有50个项目,那么一些最不重要的项目将位于顶部! 我已经尝试过使用flexbox进行一些变体,但是什么也无法工作。有人可以横向订购吗? 问题答案: 如所记录的,CSS列的顺序是从上到下,然后是从左到右,因此呈现的列的顺序

  • 本文向大家介绍CSS图片响应式 垂直水平居中,包括了CSS图片响应式 垂直水平居中的使用技巧和注意事项,需要的朋友参考一下 我看最近微博流行CSS居中技术,我看了几编资料写的都不多好,于是抽时间把相关资料整合了,具体内容如下。 点击此处下载源码 效果展示: 要求: 1.尽可能兼容更多浏览器,这里兼容到ie7,ie6不支持max-*就不考虑了。 2.浏览器尺寸变化时,图片总是等比例拉伸或缩放。 3.

  • 问题内容: 如何使用flexbox在容器内水平和垂直居中div。在下面的示例中,我希望每个数字都彼此相邻(按行),并水平居中。 问题答案: 我认为您想要以下内容。 你的元素应该是块级(而非)如果你想要的高度和顶部/底部填充,以正常工作。 另外,在上,将宽度设置为而不是。 您的属性很好。 如果您希望垂直居中于视口中,请为和分配100%的高度,然后将页边距清零。 请注意,需要一个高度才能看到垂直对齐效