Bootstrap 4.6 响应式设计答案

【问题标题】：Bootstrap 4.6 Responsive DesignBootstrap 4.6 响应式设计
【发布时间】：2022-11-21 07:19:23
【问题描述】：

我想在 bootstrap 4.6 中使用这个设计。我已经使用高度完成了这个设计。但问题是内部元素是重叠的。

【问题讨论】：

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

如果您可以共享代码，将能够更好地理解您所采用的方法。

不确定您是否参考了Bootstrap Grid layout 上的文档。

Refer this link 以更好地了解响应部分。

【讨论】：

【解决方案2】：

你可以试试这段代码，它会给你你的目标：

<div class="container">
    <div class="row">
      <div class="col-md-8 d-flex flex-column  text-white bg-opacity-75">
        <section class="one flex-grow-1 bg-danger">1</section>
        <section class="three flex-grow-1 bg-black ">3</section>
        <section class="four-five d-flex flex-column flex-grow-1 flex-md-row">
          <div class="content bg-success flex-grow-1">4</div>
          <div class="content bg-secondary flex-grow-1">5</div>
        </section>
      </div>
      <div class="col-md-4 d-flex flex-column  text-white bg-opacity-75">
        <div class="box bg-info bg-gradient flex-grow-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, ratione!</div>
        <div class="box bg-warning flex-grow-1">Voluptatibus cupiditate reiciendis dolorem! Mollitia impedit nesciunt quas excepturi quidem!</div>
        <div class="box bg-danger flex-grow-1">Minus quia perferendis, sunt a reprehenderit beatae harum. Earum, provident.</div>
      </div>
    </div>  
  </div>

【讨论】：