所有,
我正在做一个 Bootstrap 制作的项目,其中有一行有五个子项:
<div class="container">
<div class="row">
<div class="col">[content]</div>
<div class="col">[content]</div>
<div class="col">[content]</div>
<div class="col">[content]</div>
<div class="col">[content]</div>
</div>
</div>
(The内容本身是引导卡(如果需要考虑的话)
我在col div上设置了一些灵活的布局类:
<div class="col col-12 col-md-6 col-lg-4 col-xl-3">[content]</div>
这在较小的宽度上是很好的,它会导致换行,我对此没有意见。但在某个点上,屏幕足够宽,以至于有足够的空间容纳所有五个内容。我只是希望在这个大小上,内容div就像class="col"
一样,这样它们就可以共享一行,并均匀地分配空间。
我尝试了col-xl-auto
,但似乎没有效果:卡片只是减少到它们的"自然"大小,它们不能很好地填充行。
我以为我理解了bootstrap的row-cols-*
功能的概念,但是我得到了糟糕的结果。我试着把行class="row row-cols-xl-5"
和每个内容div col-xl-1
放在一起,但是没有效果:该行只是将自己限制在12列中的前5列之前占用的空间内,然后卡就挤到那里。我曾预计row-cols-*
会占用之前被划分为12列的相同水平空间,而是将相同空间划分为 * 列,而不仅仅是限制行的宽度。我是否误解了这一点?
不管怎样,有人知道我想完成什么吗,col-xl-something
会给我标准的col
操作?
1条答案
按热度按时间2sbarzqh1#
一些教训
我尝试添加行class ="row row-cols-xl-5"和每个内容div col-xl-1,但不起作用
列类在层次结构上比行类高,所以你在这里所做的就是用
.col-xl-1
强制每一列的宽度为1/12(8.33%),这覆盖了.row-cols-xl-5
列宽的20%。注意Bootstrap实际上并不是每个
row
都有12列,它利用width %
和flex-
属性(-grow
,-shrink
,-basis
)来调整列的大小。这与使用CSS Grid不同,在CSS Grid中,我们会说div
应该有span
多列。<div class="col col-12 ...">[content]</div>
类
.col
在这里没有任何作用,因为您还使用了.col-12
。类.col
在列上设置了flex-grow: 1;
,它将被.col-12
覆盖,.col-12
设置了flex-grow: 0;
,但添加了width: 100%
。我试过col-xl-auto,但似乎没有效果
使用
-auto
将为列提供自然(最小)宽度。它在列上设置flex-grow: 0;
和width: auto;
。溶液
有没有人知道我想做什么,col-xl-something会给我标准的col操作?
这将产生:
.row-cols-1
;md
断点处,两个相等的列:.row-cols-md-2
;lg
断点处,三个相等的列:.row-cols-lg-3
;xl
断点处:.col-xl
列将具有flex-grow: 1;
。最后,你在问题中没有说明你理想的布局是怎样的,也没有加上卡片,所以我不能给你任何其他的解决办法,只能问你自己:我需要为我的布局指定列数吗?2在什么样的视区宽度下,布局的行为不是我想要的那样?3只有这样,才能添加列数。
因为如果你只是想要一个自由流动的卡片布局,就使用你开始提问时的布局,也许默认情况下只有堆叠的列,但在
md
断点处开始换行: