Bootstrap：容器中带有列的全宽网格答案

【问题标题】：Bootstrap: Full width grid with columns in containerBootstrap：容器中带有列的全宽网格
【发布时间】：2017-01-24 23:54:17
【问题描述】：

我想创建一个全宽布局，左侧为蓝色半边，右侧为红色半边。

之后我想在布局内但在容器内添加文本。

这可能吗？

编辑：您可以看到，绿色容器的大小与蓝色和红色一半内的 col-6 不同。

* {
  color: white;
}
.blue-half {
  background: blue;
}
.red-half {
  background: red;
}
.green {
  background: green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container green">
  I am the normal container!
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue-half">
      <div class="container-fluid text-center">
        <div class="row">
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am first half of the blue container!
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am second half of the blue container!
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 red-half">
      <div class="container-fluid text-center">
        <div class="row">
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am first half of the red container!
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am second half of the blue container!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

这就是我正在阅读的内容：“我想要一个绿色容器占据前半部分，将后半部分分成两半（即四分之一），然后将那些半部分分成两半”。如果这不完全正确，那么也许创建所需布局的图像并将其用作示例？
类似这样的东西（蓝色部分“我们是谁”）：stripe.com/about - 两个半列的背景应该是全宽的，内容应该与引导程序中的普通容器的宽度相同.
这就像使用 container 替换 container-fluid 并在蓝色/红色一半内使用 col-*-12 一样简单。我会适当地更新我的回复

标签： css twitter-bootstrap twitter-bootstrap-3 grid bootstrap-4

【解决方案1】：

试试这个

<div class="container-fluid">
 <div class="row">
    <div class="col-xs-6 blue">
        <div class="container">
            <!--content-->
        </div>
    </div>
    <div class="col-xs-6 red">
        <div class="container">
            <!--content-->
        </div>
    </div>
 </div>

CSS

  .red{
    background: red;
   }
  .blue{
    background: blue;
  }

【讨论】：

伙计，总有人比我强！
感谢您的帮助。但这并不完全是我的意思。现在内容位于列内的容器中。我需要的是两个列的内容组合在一个容器的宽度中（在布局中居中）。例如：屏幕尺寸为 3000px 宽。每列（蓝色和红色）。宽度为 1500 像素。现在我需要一个在布局中心有一个 1140px 的容器和两个“col-6”列。我希望你明白我想说什么:)
我不太确定你在问什么。根据您的评论，我正在阅读您想要两个主要列，红色和蓝色，然后这些列的内容居中，并且该内容也分成两半，即蓝色内容和红色内容中的另外两列。对吗？
我对我的回答进行了更新，以反映我对您的评论的理解。让我知道您所描述的是否是这样的

【解决方案2】：

这样的？

* { color: white; }

.blue-half {
  background: blue;
}

.red-half {
  background: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue-half">
      <div class="container-fluid text-center">
        <div class="row">
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am first half of the blue container!
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am second half of the blue container!
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 red-half">
      <div class="container-fluid text-center">
        <div class="row">
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am first half of the red container!
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            I am second half of the red container!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

更新我试图从您的评论中创建我正在阅读的内容，重新调整格式不正确

更新 2

.row-green {
  background: green;
  color: white;
}
.blue-half {
  background: blue;
  color: white;
}

.red-half {
  background: red;
  color: white;
}

.option1 .row .container {
  padding: 0;
}

.option2 .container.unindent {
  padding: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid option1">
  <h3>Option 1</h3>
  <p>
    This uses a .row .container selector rule to enforece the padding removal on containers nested in rows.
  </p>
  <div class="row row-green">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      I am the row above!
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue-half">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            I am the blue container!
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 red-half">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            I am the red container!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid option2">
  <h3>Option 2</h3>
  <p>
    This uses an unindent CSS class on the containers that need to have the padding removed
  </p>
  <div class="row row-green">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      I am the row above!
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue-half">
      <div class="container unindent">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            I am the blue container!
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 red-half">
      <div class="container unindent">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            I am the red container!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

非常感谢！但正如我在对 Damians 回答的评论中所写的那样，这并不是我的意思。抱歉，我的问题可能有点不清楚。
再次感谢。我还在我的问题中添加了一个示例代码。您可以看到，内容的开头与绿色容器不在同一行。这就是我努力实现的目标
那么你想让“普通容器”与红色和蓝色半容器在同一行吗？
非常感谢您的帮助。但结果仍然不是我的意思。抱歉 :( 绿色容器中的文本与蓝色容器中的文本不对齐。
嗯，但现在它仍然不在容器的宽度内。相反，内容也是全尺寸的。也许我的问题不清楚。我自己再试一次，或者必须更清楚我需要什么。再次感谢！

【解决方案3】：

变体2.将容器分成两部分

您可以为容器的每一半定义一个新类。但在此解决方案中，您需要控制两半具有相同的高度。

.blue { background: blue; color: white; }
.red  { background: red;  color: white; }

.container-left-half,
.container-right-half {
  padding-right: 15px;
  padding-left: 15px;
}
.container-left-half {
  margin-right: 0;
  margin-left: auto;
}
.container-right-half {
  margin-right: auto;
  margin-left: 0;
}
@media (min-width: 768px) {
  .container-left-half,
  .container-right-half {
    width: 375px;
  }
}
@media (min-width: 992px) {
  .container-left-half,
  .container-right-half {
    width: 485px;
  }
}
@media (min-width: 1200px) {
  .container-left-half,
  .container-right-half {
    width: 585px;
  }
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 blue">
      <div class="container-left-half">
        <div class="row">
          <div class="col-xs-12">This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue!</div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 red">
      <div class="container-right-half">
        <div class="row">
          <div class="col-xs-12">This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red!</div>
        </div>
      </div>
    </div>
  </div>
</div>

变体 1. 线性渐变和套娃

1) 您可以使用the linear-gradient() function 制作双色背景。

2) Bootstrap 有rows 和two types of containers：

将.container 用于响应式固定宽度容器。

将.container-fluid 用于全宽容器，跨越视口的整个宽度。

行必须放置在.container（固定宽度）或.container-fluid（全宽度）内，以便正确对齐和填充。

3) 这样你就可以制作套娃了：
.container-fluid > .row with linear-gradient > .container > .row with content

Matryoshka 是一套颜色鲜艳的空心木娃娃，大小不一，旨在相互嵌套。

4) col-xs-6 等价于col-xs-6 col-sm-6 col-md-6 col-lg-6。

.two-colors {
  background: linear-gradient(to right, blue 50%, red 50%);
  color: white;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row two-colors">
    <div class="container">
      <div class="row">
        <div class="col-xs-6">This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue!</div>
        <div class="col-xs-6">This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red!</div>
      </div>
    </div>
  </div>
</div>

【讨论】：

感谢您的帮助。线性渐变的想法很好。我希望有一个没有 CSS 技巧的解决方案。在这个版本中，我只能在背景中使用颜色，而不能使用图像。
@Simon 我添加了第二个变体。请检查。

【解决方案4】：

试试这个：

  <div class="container">
    <div class="row">
      <div class="col-md-6">Left Column</div>
      <div class="col-md-6 col-expand">Right Column</div>
    </div>
  </div>

CSS：

.col-expand {
    position: absolute;
    background-color: orange;
    width: 100%;
    right: 0px;
}

【讨论】：