为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

qq_花开花谢_0 2023-12-19 10:36:08
为什么当我设置 height: 100% 或 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>
查看完整描述

1 回答

?
慕后森

TA贡献1802条经验 获得超5个赞

如果我理解正确的话,你想将绿色块覆盖到蓝色块中。


它无法设置高度,因为两个块之间有文本(两个)。


<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>


查看完整回答
反对 回复 2023-12-19
  • 1 回答
  • 0 关注
  • 49 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信