结合rowspan和colspan的引导程序

问题描述

我正在测试Bootstrap 3，被行的基本脚手架卡住了。我重新查看了他们的文档次数，可以看到嵌套列，您可以在其中基本上将列嵌套在列中，但是我无法找到将行合并为一个并使其与未合并行旁边的列对齐的功能。

下面的图片应该说明我想要完成的工作。 file system

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<div class="thm-container">


  <div class="row" style="background-color:red;">

    <div class="col-md-3">
      <div class="single-feature-style-five">
        <div class="inner-Box">
          <div class="content">
            <h3>PPE</h3>

            <a href="#" class="more">Find out how <i class="fa fa-angle-double-right"></i></a>
          </div>
          <!-- /.content -->
        </div>
        <!-- /.inner-Box -->
      </div>
      <!-- /.single-feature-style-five -->
    </div>
    <div class="col-md-9">

      <div class="row">
        <div class="col-md-4">
          <div class="single-feature-style-five" style="background-color:orange;">
            <div class="inner-Box">
              <div class="content">
                <h3>PPE</h3>

                <a href="#" class="more">Find out how <i class="fa fa-angle-double-right"></i></a>
              </div>
              <!-- /.content -->
            </div>
            <!-- /.inner-Box -->
          </div>
          <!-- /.single-feature-style-five -->
        </div>
        <!-- /.col-md-4 -->
        <div class="col-md-4">
          <div class="single-feature-style-five" style="background-color:violet;">
            <div class="inner-Box">
              <div class="content">
                <h3>A Step Sterlization</h3>

                <a href="#" class="more">Find out how <i class="fa fa-angle-double-right"></i></a>
              </div>
              <!-- /.content -->
            </div>
            <!-- /.inner-Box -->
          </div>
          <!-- /.single-feature-style-five -->
        </div>
        <!-- /.col-md-4 -->
        <div class="col-md-4">
          <div class="single-feature-style-five" style="background-color:brown;">
            <div class="inner-Box">
              <div class="content">
                <h3>Fumigator</h3>

                <a href="#" class="more">Find out how <i class="fa fa-angle-double-right"></i></a>
              </div>
              <!-- /.content -->
            </div>
            <!-- /.inner-Box -->
          </div>
          <!-- /.single-feature-style-five -->
        </div>
        <!-- /.col-md-4 -->
      </div>
      <!-- /.row -->

      <div class="row">
        <div class="col-md-4">
          <div class="single-feature-style-five" style="background-color:yellow;">
            <div class="inner-Box">
              <div class="content">
                <h3>PPE</h3>

                <a href="#" class="more">Find out how <i class="fa fa-angle-double-right"></i></a>
              </div>
              <!-- /.content -->
            </div>
            <!-- /.inner-Box -->
          </div>
          <!-- /.single-feature-style-five -->
        </div>
        <!-- /.col-md-4 -->
        <div class="col-md-4">
          <div class="single-feature-style-five" style="background-color:blue;">
            <div class="inner-Box">
              <div class="content">
                <h3>A Step Sterlization</h3>

                <a href="#" class="more">Find out how <i class="fa fa-angle-double-right"></i></a>
              </div>
              <!-- /.content -->
            </div>
            <!-- /.inner-Box -->
          </div>
          <!-- /.single-feature-style-five -->
        </div>
        <!-- /.col-md-4 -->
        <div class="col-md-4">
          <div class="single-feature-style-five" style="background-color:black;">
            <div class="inner-Box">
              <div class="content">
                <h3>Fumigator</h3>

                <a href="#" class="more">Find out how <i class="fa fa-angle-double-right"></i></a>
              </div>
              <!-- /.content -->
            </div>
            <!-- /.inner-Box -->
          </div>
          <!-- /.single-feature-style-five -->
        </div>
        <!-- /.col-md-4 -->
      </div>
      <!-- /.row -->

    </div>
  </div>



</div>
<!-- /.thm-container -->

解决方法

希望这对您有帮助：

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<link rel="Stylesheet" href="row-col.css">   
<html>         
</head>
<Body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4 left"></div>
            <div class="col-md-8">
                <div class="row right-top"></div>
                <div class="row right-bottom"></div>
            </div>
        </div>
    </div>
</Body>
</html>

和CSS：

.left {
    background:#ff2842;
    height:100vh;
}
.right-top {
    height:50vh;
    background:#ffc600;
}
.right-bottom {
    height: 50vh;
    background:#2f303a;
}