Bootstrap Cols无法继承父容器尺寸问题求助

要实现每个面板占主容器50%宽高的2×2布局，你需要调整HTML结构并利用Bootstrap的网格系统和flex布局特性，以下是修复方案：

方案1：使用Bootstrap内置工具类（推荐） #

这种方式依赖Bootstrap的内置类，减少自定义CSS，更符合框架规范：

修改后的HTML #

<Container className="defaultContainer" fluid>
  <Row className="h-50">
    <Col className="informatsPanel h-100" xs={6}>1</Col>
    <Col className="informatsPanel h-100" xs={6}>2</Col>
  </Row>
  <Row className="h-50">
    <Col className="informatsPanel h-100" xs={6}>3</Col>
    <Col className="informatsPanel h-100" xs={6}>4</Col>
  </Row>
</Container>

简化后的CSS #

.defaultContainer {
  margin-top: 1rem;
  background-color: #171d2b;
  text-align: center;
  height: 700px; /* 固定容器高度 */
}

.informatsPanel {
  border: 2px solid white;
}

方案2：自定义Flex布局 #

如果需要更灵活的控制，可通过自定义flex属性实现：

修改后的HTML #

<Container className="defaultContainer" fluid>
  <Row className="panelRow">
    <Col className="informatsPanel" xs={6}>1</Col>
    <Col className="informatsPanel" xs={6}>2</Col>
  </Row>
  <Row className="panelRow">
    <Col className="informatsPanel" xs={6}>3</Col>
    <Col className="informatsPanel" xs={6}>4</Col>
  </Row>
</Container>

对应的CSS #

.defaultContainer {
  margin-top: 1rem;
  background-color: #171d2b;
  text-align: center;
  height: 700px;
  display: flex;
  flex-direction: column; /* 让Row垂直排列 */
}

.panelRow {
  flex: 1; /* 两个Row平分容器高度 */
  display: flex; /* 确保Col能继承Row高度 */
}

.informatsPanel {
  border: 2px solid white;
  height: 100%; /* 占满所在Row的高度 */
}

关键修复点说明 #

1. 布局结构调整：将原单个Row中的4个Col拆分为两个Row，每个Row包含2个Col，并用xs={6}确保每个Col占50%宽度（Bootstrap网格系统默认12列，6列即50%）。
2. 高度继承：
   • 方案1中，h-50让每个Row占容器高度的50%，h-100让Col占满所在Row的高度。
   • 方案2中，通过flex布局让两个Row平分容器高度，再让Col占满Row的高度。
3. 移除冗余属性：删除informatsPanel中的display: inline-block和自定义width，避免与Bootstrap的网格布局冲突。

内容的提问来源于stack exchange，提问作者Skooczekk