引导网格-一半流体，一半正常容器布局

Question

我需要一些帮助来建立一个布局。查看想要的布局的图像。绿色区域显示旋转木马，而蓝色区域不是旋转木马的一部分。

在这个布局中，重要的是绿色区域要与屏幕左侧对齐，蓝色区域要包含在容器中，否则我可以很容易地使用container-fluid类。

那么，有人有一个简单的答案吗?

Answer 1

这在半流体半非流体的情况下非常有效。在我的情况下，我想要一个地图在左半部分，右边到浏览器边缘，与什么将最终成为一个联系人表单在右手边，但不超过标准container类的宽度。

HTML

<div class="container-fluid relative">
        <div class="row">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 absolute left-half" style="background-color: #E2F1FC; height: 400px">
                        <div id="map-canvas"></div>
                    </div>
                    <div class="col-sm-6 col-sm-offset-6">
                        <p>
                            Duis at hendrerit erat, non interdum urna. Praesent metus odio, laoreet sed ultrices et, egestas
                            non erat. In tincidunt et purus a convallis. In hac habitasse platea dictumst. Aenean turpis
                            justo, lobortis ac gravida et, sagittis eu est. Pellentesque habitant morbi tristique senectus
                            et netus et malesuada fames ac turpis egestas. Duis convallis est et placerat gravida. Cras quis
                            quam vestibulum, mollis sapien a, mollis libero. Donec ut massa ultricies, porttitor erat quis,
                            pretium massa. Donec placerat egestas pulvinar.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS

.relative{
    position: relative;
}
.absolute{
    position: absolute;
}
.left-half{
    left: 0;
    right: 50%;
}

这里是小提琴https://jsfiddle.net/JohnHalsey/z3menav7/2/

如果你想让它在移动设备上堆叠，你可以很容易地添加断点

Answer 2

@John Halsey的BS4解决方案更新:

.relative {
  position: relative;
}
.left-half {
  padding-left:0 !important;
  left: 0;
  right: 50%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid position-relative">
  <div class="row">
    <div class="container">
      <div class="row">
        <div class="col-6 position-absolute left-half">
          <div id="map-canvas" style="background-color: #E2F1FC; height: 400px"></div>
        </div>
        <div class="col-6 offset-6">
          <p>
            Duis at hendrerit erat, non interdum urna. Praesent metus odio, laoreet sed ultrices et, egestas non erat. In tincidunt et purus a convallis. In hac habitasse platea dictumst. Aenean turpis justo, lobortis ac gravida et, sagittis eu est. Pellentesque
            habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis convallis est et placerat gravida. Cras quis quam vestibulum, mollis sapien a, mollis libero. Donec ut massa ultricies, porttitor erat quis, pretium massa.
            Donec placerat egestas pulvinar.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

<div class="container-fluid">
   <div class="row">
      <div class="col-md-8>
         ...
      </div>
      <div class="col-md-4>
         <div class="container-fluid">
             <div class="row">
                 <div class="col-md-4>
                    ...
                 </div>
             </div>
             <div class="row">
                 <div class="col-md-4>
                    ...
                 </div>
             </div>
         </div>
      </div>
   </div>
</div>

Answer 4

我有col____6单元格的解决方案…

html:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6 col-z-index-fix">
            ...
        </div>
        <div class="container">
            <div class="row">
                <div class="col-xs-6">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>

css:

.col-z-index-fix{
    z-index: 10;
}

事实上，你不需要使用。col-z-index-fix，直到你想设置position: relative/fixed/absolute到内部的。container或。rowdiv。

Answer 5

我一直在这里，在这篇文章和其他人寻找一个解决方案的bootstrap 4，我没有找到任何东西。现在我有了一个解决方案来混合容器布局和容器流体布局。也许有一天，这个人可以帮助别人!

.example {
  position: relative;
  overflow: hidden;
  height: 220px; /* depending of your code */
}
.example-left:before {
  position: absolute;
  content: "";
  width: 50%;
  height: 100%;
  top: 0;
  z-index: -1;
  left: -15px;
  background-color: #f6f6f6; /* If you want to use color*/
}
.example-right:after {
  position: absolute;
  content: "";
  width: 50%;
  height: 100%;
  top: 0;
  z-index: -1;
  right: -15px;
  background-image: url('https://www.sciencenews.org/sites/default/files/2019/03/main/articles/032719_lg_blackhole_feat.jpg'); /* If you want to use image*/
  /* depending of your propouse */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="example example-left">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 offset-lg-6">
        <p>Content Test</p>
      </div>
    </div>
  </div>
</div>
<div class="example example-right">
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <p>Content Test</p>
      </div>
    </div>
  </div>
</div>