Question

{{1}}

https://jsfiddle.net/9e85Lb0y/

在此示例中，有两个伸缩行，每个伸缩行包含一个卡片组。第一副牌有2张牌，第二副牌有3张牌。所有卡都是相同的。为什么第一排的牌宽一些？我本来希望最上面一行与最下面一行具有相同的宽度。

Answer 1

列并不意味着在卡片组内部。它们仅应包含在.row中。卡片将进入列内。

从Bootstrap文档...

“行是列的包装器...在网格布局中，内容必须为放置在列中，并且只有列可以是的直接子代行。”

如果您要为卡片组中的卡片设置宽度，请参阅：

Bootstrap 4 card-deck with number of columns based on viewport，或
bootstrap 4 card-deck containing cards with different width

Answer 2

TLDR

使用flex-row和col-*明确指定宽度。使用card-deck和card创建大小均匀的块。避免将两者混合使用，因为它们不是为开箱即用而设计的。

长期回答

这里的问题很可能是由flex-row和card-deck类的混合引起的。两者都提供了非常相似的功能，但是在一些关键区别上使它们的行为分开。

card-deck类仅保证具有card类的任何直接元素的宽度都相同。

<div class="card-deck">
  <div class="card">
    <!-- Content -->
  </div>
  <div class="card">
    <!-- Content -->
  </div>
  <div class="card">
    <!-- Content -->
  </div>
</div>

每个<div class="card"></div>现在将变为统一宽度。他们不不能保证填满整个父容器。 card类还应用了15px的左右边缘，以使它们分开。

<div class="flex-row">
  <div class="col-4">
    <!-- 1/3 Width Column -->
  </div>
  <div class="col-4">
    <!-- 1/3 Width Column -->
  </div>
  <div class="col-4">
    <!-- 1/3 Width Column -->
  </div>
</div>

另一方面，flex-row和col-*类允许您创建特定大小的列。每个col-*类仅对元素应用一个宽度，这是您的责任，以确保您的内容适合每个断点。 col的不应该应用任何边距，因为CSS宽度声明不考虑边距。

引导程序为什么根据cols数量来不同地处理col间距？

2 个答案: