时间戳

首页 > 解决方案 > 在列内展开容器以适应引导网格中的列高

html - 在列内展开容器以适应引导网格中的列高

问题描述

height: 100%当我设置or时，为什么绿色容器会在蓝色列上展开h-100？

我怎样才能使它刚好适合柱子的剩余高度？

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container" style="background-color: black">
  <div class="row">
    <div class="col-sm-6" style="background-color: red">
      <p>Some</p>
      <p>More</p>
      <p>Content</p>
      <p>Here</p>
    </div>
    <div class="col-sm-6" style="background-color: blue">
      <h3>Content I want to keep</h2>
      <section class="d-flex h-100" style="background-color: green">
        <button class="btn btn-danger m-auto">Centered Button</button>
      </section>
    </div>
  </div>
</div>

标签： htmlcsstwitter-bootstrapbootstrap-4flexbox

解决方案

如果我理解正确，您想将绿色块覆盖到蓝色块中。

它无法设置高度，因为两个块之间有文本（ two ）。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container" style="background-color: black">
  <div class="row">
    <div class="col-sm-6" style="background-color: red">
      <p>Some</p>
      <p>More</p>
      <p>Content</p>
      <p>Here</p>
    </div>
    <div class="col-sm-6" style="background-color: blue">
      <section class="d-flex h-100" style="background-color: green">
        <button class="btn btn-danger m-auto">Centered Button</button>
      </section>
    </div>
  </div>
</div>

推荐阅读