Question

我正在使用引导程序构建布局。在设计中，大多数元素都被装箱了（所以我使用“容器”类）。

某些行在容器内部有1列，但另外1列需要突破容器并具有全宽。

这是我想要实现的目标的图像：

我真的很难创建这种布局。有任何想法吗？这是下面代码的一个代码笔：https://codepen.io/leonfrombeawwwer/pen/bXGvQb

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<div class="container">
  <div class="row">

    <div class="col-6">
          <div class="green-box"></div>
        </div>

        <div class="col-6">
          <div class="blue-box"></div>
        </div>

    </div>
</div>

.green-box {
  background: green;
  height: 200px;
}

.blue-box {
  background: blue;
  height: 200px;
}

我尝试了一种采用百分比宽度的容器流体容器，该容器需要以盒装布局保留在其中。但这推动了所有其他要素的发展标头导航。

我也尝试了绝对定位并使用flexbox。没有任何结果会在所有视口中都有用。

感谢您的帮助。

Answer 1

我现在找到了解决方案。请在该密码笔中找到它：[https://codepen.io/leonfrombeawwwer/pen/bXGvQb][1] [https://codepen.io/leonfrombeawwwer/pen/bXGvQb] 1

或此处：

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<div class="container-fluid relative-container">
  <div class="row">
      <div class="col-md-6 placeholder"></div>
    <div class="col-6">
          <div class="green-box absolute-full-width-image"></div>
        </div>
   </div> <!-- .row -->
</div> <!-- .container-fluid .relative-container -->

<div class="container">
  <div class="row">
        <div class="col-6">
          <div class="blue-box"></div>
        </div>
    <div class="col-md-6 placeholder"></div>
  </div> <!-- .row -->
</div> <!-- .container -->

.green-box {
  background: green;
  height: 200px;
}

.blue-box {
  background: blue;
  height: 200px;
  width: 120%;
}

.relative-container {
  position relative;
}

.absolute-full-width-image {
  position: absolute;
  right: 0;
  width: 110%;
}

引导程序行，其中一列打破了装箱的容器

1 个答案: