Twitter bootstrap 引导-拆分背景容器全宽

这是我的示例代码

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

样品
样品

我有这个

但我需要这个

---

我可以使用container fluid获得我想要的结果，但我需要container…

阅读您问题的注释，为什么不使用类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>

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

示例：

您可以在下一个示例中使用宽度调整，并检查这是否是您所期望的。在这个示例中，max width被减为900px，因此您可以直观地看到它的工作方式

更新：

---

这里有一个新的示例，具有全宽背景（有两种颜色）和一个内部html，具有固定最大宽度（示例中为900px）：

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>

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

现场示例

---

我知道了如何在没有太多代码的情况下实现这一点。与Shidersz的答案类似，但更多的是处理结构。保持响应度并使用引导类： HTML

---

你能分享一下为什么不能使用容器流体吗？因为改变其他方式并不容易。我希望我的结构在屏幕上有一个固定的宽度，如1080p…添加CSS以使

的宽度。容器

1080px什么？在分辨率为1920*1080的显示器上，我希望宽度始终为1170px不，没有同样的问题…看这里…我想要固定宽度，但背景必须覆盖整个宽度抱歉，我不太理解你的问题/目标。我仍然不确定为什么容器流体单独不适合你。你能解释一下你需要什么吗？对不起，我的英语很差…正如你在第一张图片中看到的，分辨率像1600width和容器固定，背景只填充容器和容器外的白色，而我希望背景覆盖整个屏幕宽度…结果必须像，例如，背景容器流体和web结构容器固定…希望我是清楚的：）所以，你希望背景是全宽的（即填充屏幕的可用宽度），但内部html的固定最大宽度为X像素？如果所有网页的背景相同，则可以将其添加到正文或包装容器中，并将所有其他html保留在固定宽度的容器中（我将用一个示例更新）。另一种可能的情况是，即使元素有固定的宽度，所有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>

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