css - Bootstrap 4自定义网格

This question already has answers here:

Extend bootstrap row outside the container
                                
                                    （4个答案）
                                
                        
                                2年前关闭。
            
                    
如何使用Bootstrap 4执行以下网格？

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

最佳答案

您应该使用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