Question

我需要一些帮助来构建布局。 Check out the image for the wanted layout。绿色区域显示旋转木马，而蓝色区域不是旋转木马的一部分。

在这种布局中，重要的是绿色区域与屏幕左侧对齐，并且蓝色区域保持在容器中，否则我可以轻松使用容器 - 流体类。

那么，有没有人对此有简单的答案？

Answer 1

这适用于半流体，一半不适用。在我的情况下，我想要一个左半边的地图，一直到浏览器边缘，最后将是一个右侧的联系表格，但不比标准container类宽度宽。< / p>

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

 A10 = A * 10                   //0.175 * 10 = 1.75
 AInt = (Int)A10                //integer part = 1
 AFrac = A10 - AInt             //fractional part = 0.75
 Output  = AFrac? AFrac: 1.0 ;   //extra case of zero fractional part

Answer 3

我有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或.row div。

Answer 4

我曾在此和其他人在这里寻找引导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>

Answer 5

@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>

Bootstrap网格 - 半流体，半正常容器布局

5 个答案: