Bootstrap 4自定义网格[重复]答案

【问题标题】：Bootstrap 4 custom grid [duplicate]Bootstrap 4自定义网格[重复]
【发布时间】：2018-10-18 03:07:02
【问题描述】：

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

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

【问题讨论】：

【解决方案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

【讨论】：

可能是这样，但这种布局不等于常规容器link
@user2865895 img 中的容器不等于链接中的容器。您还需要添加更多信息。