Question

我目前正在建立一个网站，这个网站是每个不同部分分成水平面板的高页之一。

某些水平面板的中间固定宽度居中（参见图中的1,2,3,5），有些是全宽的（参见图中的4）。对于固定宽度的I＆＃39; m使用＆＃34; .container＆＃34;上课，这很容易，工作正常。对于全宽面板，我使用＆＃34; .container-fluid＆＃34;。

现在我遇到的问题如下（参见图片以供参考）。

因此面板4是全宽的，由2列组成。文本内容介于B＆amp; B之间。 C和C＆amp; D，但有2个背景图像跨越A到C和C到E，我无法弄清楚如何做到这一点。

我试图将其拆分为2列，然后在中间有一个固定宽度的部分，但无法使其正常工作。这就是我目前所处的位置：

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

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

快乐的编码！

Answer 2

找到了一些解决方案，但都使用了javascript。所以这是我的css解决方案。干杯：）

/* just some styling for better view */

#mix {
  background: black;
  color: #fff;
}
.left {
  background: url('https://static.pexels.com/photos/462254/pexels-photo-462254.jpeg') no-repeat center / cover;
}
.right {
  background: url('https://static.pexels.com/photos/534020/pexels-photo-534020.jpeg') no-repeat center / cover;
}
.row {
  border-top: 1px solid black;
}
.col-sm-6 {
  padding-top: 15px;
  padding-bottom: 15px;
}
/* and this below is basically what you need */

@media (min-width: 768px) {
  .half-container {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 375px;
  }
  .left-half-container {
    margin-right: -15px;
  }
  .right-half-container {
    margin-left: -15px;
  }
}
@media (min-width: 992px) {
  .half-container {
    max-width: 485px;
  }
}
@media (min-width: 1200px) {
  .half-container {
    max-width: 585px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="mix">
  <div class="container">
    <div class="row">
      <div class="left col-sm-6">
        <div class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      </div>
      <div class="right col-sm-6">
        <div class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      </div>
    </div>
  </div>
  <div class="container-fluid">
    <div class="row">
      <div class="left col-sm-6 clearfix">
        <div class="half-container left-half-container pull-right text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      </div>
      <div class="right col-sm-6 clearfix">
        <div class="half-container right-half-container pull-left text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      </div>
    </div>
  </div>
</div>

Answer 3

下面是结构，并使用图像作为容器 - 流体div的背景图像

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

Answer 4

您可以将它们分成两个容器，每个容器占最大宽度的50％;

A - C可以给出这样的图像，分成两部分（每部分50％）;

HTML

        <section id="yourImage" style="background: url(img/img.jpg) center center; background-size: cover;" >
              <div class="left"></div>
              <div class="right">
                  <h1>AND NOW YOU CAN ADD TEXT HERE</h1>
              </div>
        </section>

CSS

       .left, .right{
          width: 50%; 
          float: left; 
       }

Bootstrap - 混合容器和容器流体

4 个答案: