Twitter bootstrap Bootstrap 3.50-50分割的容器流体

这是我的挑战。该设计要求使用50-50分割的全宽行。每一半都是不同的颜色。好的，很简单。其他行是固定的。容器宽度为12列

在桌面上，每一半的内容都符合一个固定的容器宽度，每个容器的宽度为6列（大），然后在移动设备上为12列

我已经从PSD上附加了一个切片

这是我完成这项工作时的初始代码

复制示例

复制示例

标题1
复制示例

标题2
复制示例

另一种不用那么多代码就能做到这一点的方法。更多的是处理结构问题。保持响应度并使用bootstrap 4类：

HTML

---

我倾向于这种类型的东西，然后根据断点固定.content的宽度。可能是因为没有加载bootstrap.css，或者它在位置上缺失。回答了另一个问题：

<div class="container-fluid">
<div class="row">
  <div class="col-xs-12 col-md-6">
    <div class="navy">
      <div class="content">
        <h2>Header 1</h2>
        <p>Copy example</p>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-6">
    <div class="light">
      <div class="content">
        <h2>Header 2</h2>
        <p>Copy example</p>
      </div>
    </div>
  </div>
</div>
</div>

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

.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;
}