Bootstrap - 拆分背景容器全宽[重复]答案

【问题标题】：Bootstrap - split background container full-width [duplicate]Bootstrap - 拆分背景容器全宽[重复]
【发布时间】：2020-11-06 07:09:22
【问题描述】：

这是我的示例代码

<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的原因吗？否则改变不会很容易..
我希望我的结构在屏幕上具有固定的宽度，例如 1080p...
添加CSS使.container的宽度为1080px
什么？在分辨率为 1920*1080 的显示器上，我希望宽度始终为 1170px

标签： twitter-bootstrap

【解决方案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;
}

示例：

您可以在下一个示例中使用宽度调整大小，并检查这是否是您所期望的。在此示例中，max-width 已减小到 900px，因此您可以直观地了解它的工作原理。

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

更新：

这里有一个带有 全宽背景（有两种颜色）的新示例和一个带有 fixed max-width（示例中为 900 像素）的内部 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/2/

【讨论】：

不，总是有同样的问题...看这里jsfiddle.net/o5ybg4jf ...我想要固定宽度，但背景必须覆盖整个宽度
抱歉，我不太了解您的问题/目标。我仍然不确定为什么单独使用 container-fluid 对您不起作用。你能解释一下你需要什么吗？
对不起，我的英语很差......正如你在第一张图片中看到的那样，在像 1600width 这样的分辨率和容器固定的情况下，当我想要的时候，背景只填充容器和容器外部的白色背景覆盖了屏幕的整个宽度......结果必须像，例如，背景容器流体和web结构容器固定......希望我很清楚:)
那么，您希望背景为全宽（即填充屏幕的可用宽度），但内部 html 的最大宽度固定为 X 像素？如果所有网页的背景都相同，那么您可以将其添加到正文或包装容器中，并将所有其他 html 保存在固定宽度的容器中（我将用一个示例进行更新）。您可能想要的另一种可能的情况是，即使元素具有固定宽度，所有 html 元素的背景也会拉伸到全宽，我不知道这是否可行。

【解决方案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

【讨论】：