Bootstrap4网格系统，嵌套行

Question

layout

如何使用引导程序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>