调整网格系统 CSS 的 React Bootstrap 卡大小答案

【问题标题】：Adjust React Bootstrap Card Sizes For Grid System CSS调整网格系统 CSS 的 React Bootstrap 卡大小
【发布时间】：2021-09-09 22:31:45
【问题描述】：

我正在尝试在网格显示中为react-bootstrap 卡片设置不同的尺寸。但是，看看我面临的问题：

我不希望 Over Under 0.5 扩展到与 Match Winner 相同的大小，因为前者只有 2 个选择，而后者只有 3 个，但我不确定如何在 css 中调整它。其他卡也会受到影响。这是我的 Market 的 React 组件，它是单独的卡片：

const Market = ({ marketName, selections }) => {
  return (
    <Card className="market-wrapper">
      <Card.Header className="market-header">{marketName}</Card.Header>
      <Table>
        <tbody>
          {selections.map((selection) => (
            <tr key={selection.id}>
              <td>{selection.name}</td>
              <td>{selection.price.toFixed(2)}</td>
            </tr>
          ))}
        </tbody>
      </Table>
    </Card>
  );
};

而且这些都装在一张更大的卡片中，卡片名称为markets-container。这是css：

.market-header {
  color: #fff;
  background-color: #44494f;
  padding: 2.5px 15px;
  border-bottom: solid 2px #c8ceae;
}

.market-wrapper {
  margin: 10px 10px 10px 10px
}
.markets-container {
  margin: 10px 0 0 0;
  min-height: 400px;
  max-height: 400px;
  overflow: auto;
  display: grid;
  grid-template-columns: auto auto;
}

【问题讨论】：

标签： javascript css reactjs react-hooks react-bootstrap

【解决方案1】：

发生这种情况是因为网格中的每个单元格都会调整高度以填充空白空间，为了防止这种情况，您可以使用 div 标记包装每个单元格

【讨论】：