Bootstrap 如何防止flex溢出到伪元素中

wfauudbj 于 2023-04-27 发布在 Bootstrap

关注(0)|答案(1)|浏览(112)

我有一个列表，我使用5个div和flex-basis来分隔每li行中的内容。每个div都有一个data-label属性，其中包含移动的设备的备用视图的标题。所以我有一个媒体查询，看起来像这样：

.col {
  content: attr(data-label);
  flex-basis: 107px;
  text-align: left;
  padding-right: 10px;
}

通过上述设置，我得到了以下结果，我真的不知道术语。在屏幕截图中，我观察到底部3个cols已经正确过渡并整齐对齐。但是顶部的一个由于某种原因 ¿溢出？ 进入:before的区域

有没有人知道这种行为的正确术语，或者有任何关于如何防止这种情况发生的提示，以便他们都整齐地对齐？我已经尝试了很多东西，在元素检查中摆弄，看看什么有效果，但我就是想不出来。
Jsfiddle reproducing the problem

1条答案

Flex子节点的flex-shrink: 1是由浏览器设置的。如果你想防止flex子节点变得小于flex-basis，那么一定要禁用0的shrink属性。

.cart-col::before {
  flex-shrink: 0;

  content: attr(data-label);
  flex-basis: 107px;
  text-align: left;
  padding-right: 10px;
}