如何让不同列中的行在bootstrap中共享高度

Question

我想知道是否可以让不同行中的列共享最大高度。我之所以采用这种方法是因为我还需要bootstrap的响应式列效果

在下面的示例中，我希望 Row1 和 Row2 的高度相同。

示例位于react-bootstrap中。它只是转换为 div 元素的 .container、.row 和 .col 类

    <Container>
        <Row>
            <Col>
                <Row>
                    Row1: Variable title text
                </Row>
                <Row>
                    ...
                </Row>
            </Col>
            <Col>some other stuff</Col>
            <Col>
                <Row>
                    Row2: Variable title text
                </Row>
                <Row>
                    ...
                </Row>
            </Col>
        </Row>
    </Container>

我尝试切换行和列的顺序，以便列自然共享高度。但后来我失去了引导程序的响应能力。您可以将内部行的内容想象为简单的卡片。随着页面宽度的变化，每张卡片中的可变文本会换行，这是所期望的。 我把中间的 放在那里，因为卡片之间还会有其他独特的内容（

Answer 1

如果要保证两列具有相同的高度，即使它们位于不同行，可以使用 d-flex 类将父列设为 Flex 容器，然后使用 flex-column 类将子列设为 Flex 容器列在列方向上弯曲项目。这样，即使内容不同，两列也将具有相同的高度。

以下是修改结构的方法：

  <Container>
    <Row className="d-flex">
      <Col className="flex-column">
        <Row>
          Row1: Variable title text
        </Row>
        <Row>
          ...
        </Row>
      </Col>
      <Col className="flex-column">some other stuff</Col>
      <Col className="flex-column">
        <Row>
          Row2: Variable title text
        </Row>
        <Row>
          ...
        </Row>
      </Col>
    </Row>
  </Container>