Bootstrap 4自定义网格

Question

如何使用 Bootstrap 4 执行以下网格？

我想要一个列从窗口边缘到内部，另一个列是标准的一半.container？

Answer 1

您应该使用fluid-container，而不是container，因为columns中有两个超过container。但column中Bootstrap无法执行此操作。

如果fluid-container太大，请使用自定义CSS限制其宽度。

.row div {
  border: 1px solid #000;
}

.h-200px {
  height: 200px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-6 mx-auto p-4 bg-dark">
    </div>
  </div>
  <div class="row">
    <div class="col-6 bg-success h-200px  ">

    </div>
    <div class="col-3 offset-3 mr-auto ml-0 bg-primary h-200px  ">

    </div>
  </div>
  <div class="row">
    <div class="col-6 mx-auto p-4 bg-dark">
    </div>
  </div>
  <div class="row">
    <div class="col-3 offset-3 ml-auto mr-0 bg-success h-200px  ">

    </div>
    <div class="col-6 bg-primary h-200px  ">

    </div>
  </div>
  <div class="row">
    <div class="col-6 mx-auto p-4 bg-dark">

    </div>
  </div>
</div>

检查CodePen