Question

这是我的示例代码

<div class="container">
  <div class="row">

    <div class="col-md-6" style="background-color:red; min-height:100px;">
      sample
    </div>

    <div class="col-md-6" style="background-color:yellow; min-height:100px;">
      sample
    </div>

  </div>
</div>

我有这个

但是我需要这个

使用容器流体可以达到所需的结果，但是我需要容器...

Answer 1

阅读您的问题的评论，为什么不使用类 container-fluid 并创建一个自定义类，以帮助限制和集中 container-fluid 元素，屏幕宽度大于指定的宽度（在您的情况下为 1170px ）。例如，使用如下代码：

HTML

<div class="container-fluid custom-class">
  <div class="row">

    <div class="col-md-6" style="background-color:red; min-height:100px;">
      sample
    </div>

    <div class="col-md-6" style="background-color:yellow; min-height:100px;">
      sample
    </div>

  </div>
</div>

CSS

.custom-class {
  max-width: 1170px;
  margin: 0 auto;
}

示例：

在下一个示例中，您可以调整宽度的大小，然后检查这是否是您所期望的。在此示例中，最大宽度已减小为 900px ，以便您可以直观地看到其工作原理。

rpmalloc

更新：

在这里，您有一个具有全角背景（具有两种颜色）的新示例，以及一个具有 fixed max-width （在示例中为900px）的内部html ：

HTML

<div class="container-fluid custom-background">
  <div class="row fixed-max-width">

    <div class="col-md-6 border border-primary" style="min-height:100px;">
      sample
    </div>

    <div class="col-md-6 border border-primary" style="min-height:100px;">
      sample
    </div>

  </div>
</div>

CSS

.fixed-max-width {
  max-width: 900px; /* Example, but you can replace by the value you need */
  margin: 0 auto;
}

.custom-background {
  background: linear-gradient(90deg, red 50%, yellow 50%);
}

实时示例

https://jsfiddle.net/8bz97a1u/1/

Answer 2

我想出了没有那么多代码的方法。与Shidersz的答案类似，但更多地涉及结构。保持响应度并使用引导程序类： HTML

<div class="position-relative">
  <div class="container-fluid background-holder">
    <div class="row h-100">
      <div class="col-md-6 bg-primary">
        <p class="text-left">left split</p>
      </div>
      <div class="col-md-6 bg-warning">
        <p class="text-right">right split</p>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row text-center">
      <section class="col-md-6">
        <h1>left content</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget mauris ut enim scelerisque sollicitudin in nec nisl. Quisque arcu arcu, bibendum id nunc sit amet, auctor bibendum tellus. Sed non scelerisque nulla. Sed pharetra lacus sapien, et condimentum
        ante condimentum non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce magna lorem, lacinia congue varius blandit, facilisis quis nulla. Maecenas eu finibus tortor, sed volutpat justo. Fusce pulvinar
      </section>
      <section class="col-md-6">
        <h1>right content</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget mauris ut enim scelerisque sollicitudin in nec nisl. Quisque arcu arcu, bibendum id nunc sit amet, auctor bibendum tellus. diam at placerat consectetur. Aliquam nec nisl luctus, imperdiet
        dolor non, feugiat ligula.
      </section>
    </div>
  </div>
</div>

CSS

.background-holder {
  overflow: hidden;
  margin: 0 auto;
  position: absolute;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.container {
  border-left: 2px solid red;
  border-right: 2px solid red;
}

jsfiddle DEMO

Bootstrap-拆分后台容器全角

2 个答案: