Layout 如何创建复杂的引导4布局

我只需要把盒子7放在盒子6下面！但是我不能

所有代码如下，要在您的机器上进行测试，请包括来自CDN的引导4：

Ps：那是桌面版，我现在不需要考虑手机版的布局

谢谢大家!

.row{
背景颜色：黄色；
}
.row.row>div{
边框：实心1px黑色；
最小高度：200px；
}
#方框5{
高度：400px；
背景颜色：浅灰色；
}
#方框6{
高度：200px；
}
#框7{
高度：200px；
}
#方框8{
高度：600px；
背景颜色：浅灰色；
}

方框1
方框2
方框3
方框4
方框5
方框6
方框7
方框8

#box5.col-4

和

#box6.col-8

这两个元素都已完全占据一行，因此

#box7

被推出

#box5

下方

使用另一个

div.row

作为

#box6

和

#box7

内部

div.col-8

.row{
背景颜色：黄色；
}
.row.row>div{
边框：实心1px黑色；
最小高度：200px；
}
#方框5{
高度：400px；
背景颜色：浅灰色；
}
#方框6{
高度：200px；
}
#框7{
高度：200px；
}
#方框8{
高度：600px；
背景颜色：浅灰色；
}

方框1
方框2
方框3
方框4
方框5
方框6
方框7
方框8

这里有一个简单的解决方案，可以用PHP动态创建布局。 如果愿意，您可以将相同的逻辑用于另一种web语言

<style>

.row {
  border: solid 1px black;
  min-height: 200px;
}

#box2 {
  background-color: lightblue;
}

#box5 {
  height: 400px;
  background-color: lightgray;
}

#box6 {
  height: 200px;
}

#box7 {
  height: 200px;
}

#box8 {
  height: 600px;
  background-color: lightgray;
}

.container {
  background-color: lightgreen;
}

#footer {
  background-color: orange;
}

</style>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<?php 
$total = 6; //from 1 to 6

?>

<?php for ($i=1; $i <= $total; $i++) :
  if ($i==1) :
?>

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-3">box 1</div>
        <div id="box2" class="col-9">box 2</div>
      </div>
    </div>
<?php 
  endif;
  if ($i==2) :
?>
    <div class="col-9">
       <div class="row">
        <div class="col-4">box 3</div>
<?php 
endif;
if ($i==3) :
?>
   <div class="col-8">box 4</div>
      </div>
      <div class="row">
        <div class="col-4" id="box5">box 5</div>   
<?php
endif;
if ($i==4) :
?>
        <div class="col-8">
          <div class="row">
            <div class="col-12" id="box6">box 6</div>
<?php
endif;
if ($i==5) :
?>
            <div class="col-12" id="box7">box 7</div>
          </div>
<?php 
endif;
if ($i==6) : 
 ?>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="row">
        <div class="col-12" id="box8">box 8</div>
      </div>
    </div>
  </div>
</div>
<?php 
endif;
endfor;

if ($total == 1) { echo '</div></div></div></div>'; }
if ($total == 2) { echo '</div></div></div></div></div></div>'; }
if ($total == 3) { echo '</div></div></div></div></div></div>'; }
if ($total == 4) { echo '</div></div></div></div></div></div></div></div>'; }
if ($total == 5) { echo '</div></div></div></div></div></div></div>'; }


?>

<div class="container-fluid" id="footer">
  <div class="row">
    <div class="col-12">
    </div>
  </div>
</div>

.行{
边框：实心1px黑色；
最小高度：200px；
}
#框2{
背景颜色：浅蓝色；
}
#方框5{
高度：400px；
背景颜色：浅灰色；
}
#方框6{
高度：200px；
}
#框7{
高度：200px；
}
#方框8{
高度：600px；
背景颜色：浅灰色；
}
.集装箱{
背景颜色：浅绿色；
}
#页脚{
背景颜色：橙色；
}
方框1
方框2
方框3
方框4
方框5
方框6
方框7
方框8