Question

我彼此之间有2张引导卡，但是它们的高度没有反应。当我将它们放在父div中并给该div设置一个固定的高度时，带有表的下层卡片将超过该高度。为了更清楚地说明这一点，我在这里转载了此问题：https://stackblitz.com/edit/bootstrap-8h1b14?file=app/app.component.css

我想要实现的是2个响应式垂直对齐的卡片，它们适合parent-div，但是如果没有硬编码的计算（我不想要），似乎找不到正确的解决方案。

Answer 1

您只需要将.allergyWrapper设置为带有flex-direction: column;的伸缩容器，并根据需要允许卡进行伸缩。

以下CSS处理卡片大小

.allergyWrapper{
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.mycard {
  flex-grow: 1;
  flex-shrink: 1;
  overflow: hidden;
}

然后让表格主体滚动，我发现this article会有所帮助。然后，我不得不将表行变成flexbox行以填充宽度（重新创建bs表样式）。

.mycard tbody {
  display: block;
  overflow: auto;
  height: 100%;
  width: 100%;
}
.mycard tr {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: stretch;
}
.mycard td,
.mycard th {
  flex-grow: 1;
}

下一步

删除表包装器<div style="overflow-y: auto;">
将.h-100添加到以下每个元素
- table
- div.tab-pane
- div.tab-content

My fork of your stack

Answer 2

只需在父（.allergyWrapper）中提供overflow-hidden类

https://stackblitz.com/edit/bootstrap-cjaupc?file=app%2Fapp.component.html

垂直对齐的引导卡没有响应

2 个答案: