Bootstrap网格无法填充父容器高度，如何实现动态高度适配？

问题分析 #

你设置了外层容器为100vw/100vh，内部计算器容器高度为50%、宽度20%，但Bootstrap的row和col默认是内容自适应高度，不会自动撑满父容器的高度空间；同时嵌套的网格结构也没有继承高度属性，导致高度仅由内部p标签的内容撑开，无法填满你设置的50%高度。

解决方案 #

通过以下几步修改，让网格完全填充父容器高度：

• 将内部容器改为d-flex flex-column布局，让子元素（row）在垂直方向分配空间
• 给所有row添加flex-grow-1，让行均匀填充容器剩余高度
• 给所有col设置h-100（Bootstrap内置类，等价于height:100%），确保列撑满所在行的高度
• 给内部p标签添加h-100 d-flex align-items-center justify-content-center，让按钮文本居中且撑满列空间

修改后的完整代码 #

return (
  <div
    style={{ width: "100vw", height: "100vh" }}
    className="d-flex align-items-center justify-content-center"
  >
    {/* 替换container为自定义容器，添加flex布局 */}
    <div style={{ height: "50%", width: "20%" }} className="d-flex flex-column border border-dark">
      {/* 每个row添加flex-grow-1，让行均分高度 */}
      <div className="row flex-grow-1">
        <div className="col col-6 h-100 border border-dark">
          <p className="h-100 d-flex align-items-center justify-content-center">AC</p>
        </div>
        <div className="col col-3 h-100 border border-dark">
          <p className="h-100 d-flex align-items-center justify-content-center">/</p>
        </div>
        <div className="col col-3 h-100 border border-dark">
          <p className="h-100 d-flex align-items-center justify-content-center">x</p>
        </div>
      </div>
      <div className="row flex-grow-1">
        <div className="col h-100 border border-dark">
          <p className="h-100 d-flex align-items-center justify-content-center">7</p>
        </div>
        <div className="col h-100 border border-dark">
          <p className="h-100 d-flex align-items-center justify-content-center">8</p>
        </div>
        <div className="col h-100 border border-dark">
          <p className="h-100 d-flex align-items-center justify-content-center">9</p>
        </div>
        <div className="col h-100 border border-dark">
          <p className="h-100 d-flex align-items-center justify-content-center">-</p>
        </div>
      </div>
      <div className="row flex-grow-1">
        <div className="col h-100 border border-dark">
          <p className="h-100 d-flex align-items-center justify-content-center">4</p>
        </div>
        <div className="col h-100 border border-dark">
          <p className="h-100 d-flex align-items-center justify-content-center">5</p>
        </div>
        <div className="col h-100 border border-dark">
          <p className="h-100 d-flex align-items-center justify-content-center">6</p>
        </div>
        <div className="col h-100 border border-dark">
          <p className="h-100 d-flex align-items-center justify-content-center">+</p>
        </div>
      </div>
      <div className="row flex-grow-1">
        <div className="col col-9 h-100">
          {/* 嵌套row同样设置高度 */}
          <div className="row h-100">
            <div className="col col-4 h-100 border border-dark">
              <p className="h-100 d-flex align-items-center justify-content-center">1</p>
            </div>
            <div className="col col-4 h-100 border border-dark">
              <p className="h-100 d-flex align-items-center justify-content-center">2</p>
            </div>
            <div className="col col-4 h-100 border border-dark">
              <p className="h-100 d-flex align-items-center justify-content-center">3</p>
            </div>
            <div className="col col-8 h-100 border border-dark">
              <p className="h-100 d-flex align-items-center justify-content-center">0</p>
            </div>
            <div className="col col-4 h-100 border border-dark">
              <p className="h-100 d-flex align-items-center justify-content-center">.</p>
            </div>
          </div>
        </div>
        <div className="col col-3 h-100 border border-dark">
          <p className="h-100 d-flex align-items-center justify-content-center">=</p>
        </div>
      </div>
    </div>
  </div>
);

关键修改点说明 #

1. 外层容器添加justify-content-center，让计算器容器水平居中（可选，根据布局需求调整）
2. 将原container改为d-flex flex-column，让内部row垂直排列并可分配高度
3. 所有row添加flex-grow-1，实现行高度均分，确保整个容器高度被填满
4. 所有col添加h-100，让列撑满所在行的高度
5. 内部p标签使用h-100 d-flex align-items-center justify-content-center，实现文本居中同时撑满列空间，解决内容高度不足的问题

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