html - Bootstrap4 网格系统，嵌套行

Question

布局

如何使用 bootstrap 4 中的网格在图像中进行布局？你可以在主行内做行吗？我好像做不到。

标签： htmlbootstrap-4

Answer 1

您可以像示例中那样使用嵌套网格系统

.b{
  border: 1px black solid;
  height: 50px;
  margin: 5px;
 }
.a{
  border: 1px black solid;
  height: 170px;
  padding:5px;
  margin:5px;
 }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="row">
  <div class="col-md-4 col-sm-4">
    <div class="a"></div>
  </div>
  <div class="col-md-8  col-sm-8">
    <div class="row">
      <div class="col-md-12 col-sm-12">
        <div class="b"></div>
      </div>
      <div class="col-md-4 col-sm-4">
        <div class="b"></div>
      </div>
      <div class="col-md-4 col-sm-4">
        <div class="b"></div>
      </div>
      <div class="col-md-4 col-sm-4">
        <div class="b"></div>
      </div>
      <div class="col-md-4 col-sm-4">
        <div class="b"></div>
      </div>
      <div class="col-md-4 col-sm-4">
        <div class="b"></div>
      </div>
      <div class="col-md-4 col-sm-4">
        <div class="b"></div>
      </div>
     </div>
  </div>
</div>