为网格系统 CSS 调整 React Bootstrap 卡片大小

Question

我试图在网格显示中为 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;
}

Answer 1

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

为网格系统 CSS 调整 React Bootstrap 卡片大小

Adjust React Bootstrap Card Sizes For Grid System CSS

javascript

css

reactjs

react-bootstrap

react-hooks