html - Bootstrap - 混合容器和容器流体

Question

我目前正在构建一个网站，该网站是那些高页面之一，分为每个不同部分的水平面板。

一些水平面板是中间居中的固定宽度(参见图中的1、2、3、5)，有些是全宽的(参见图中的4)。对于固定宽度，我使用“.container”类，这很简单并且工作正常。对于全 Angular 面板，我使用“.container-fluid”。

现在我面临的问题如下(参见图片以供引用。)

因此面板 4 是全宽的并且由 2 列组成。文本内容位于 B & C、C & D 之间，但是有 2 个背景图像跨越 A 到 C 和 C 到 E，我不知道该怎么做。

我尝试将其分成两列，然后在中间有一个固定宽度的部分，但无法使其工作。这是我目前所处的位置:

<div class="container-fluid">
    <div class="col-sm-6">
        <img src="" />
        <div class="container">
        </div>
    </div>

    <div class="col-sm-6">
        <img src="" />
        <div class="container">
        </div>
     </div>
</div>

非常感谢任何建议。

Answer 1

编辑:为container-fluid添加了两列拆分。

根据我对您问题中显示的图像的理解，我建议将容器分开并用类或 ID 命名它们，以消除库存边距或其他插入其向下或向上的内容。

<div class="container topContainer">
   <p>Content here</p>
</div>
<div class="container-fluid midContainer">
   <div class="row">
      <div class="col-sm-6 leftPad">
         <div class="row">
            <div class="col-sm-6">
               <p>Content here</p>
            </div>
            <div class="col-sm-6">
               <p>Content here</p>
            </div>
         </div>
      </div>
      <div class="col-sm-6 rightPad">
         <div class="row">
            <div class="col-sm-6">
               <p>Content here</p>
            </div>
            <div class="col-sm-6">
               <p>Content here</p>
            </div>
         </div>
      </div>
   </div>
</div>
<div class="container botContainer">
   <p>Content here</p>
</div>

要设置背景，请使用以下 CSS:

.leftPad {
   background-image: url('example.jpg');
}
.rightPad {
   background-image: url('example2.jpg');
}

这应该把它包起来，并保持干净，不要弄乱任何东西。要调整边距和其他位置，请对我在示例中设置的自定义类实现一些 CSS。

作为提示我想说不要在行或列内使用容器。将整个页面包裹在一列中，并用行和列分隔内容本身，以满足您的需求。

祝你编码愉快!