引导行跨度

Question

我有这个 Bootstrap 设计，两个rows，它们的列是class="col-sm-2"和class="col-sm-10"。

如何使 rowspan 像下面的 img 一样？

Answer 1

请看这个。我用过 bootstrap-4。

/*this css is only for identifying row*/
.row > [class^="col-"]  {
  background-color: rgba(86, 61, 124, 0.15);
  border: 1px solid rgba(86, 61, 124, 0.2);
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-2">
      1 of 2
    </div>
    <div class="col-10">
      <div class="row">
        <div class="col-12">
          Level 2
        </div>
        <div class="col-12">
          Level 2
        </div>
      </div>
    </div>
  </div>
</div>