Bootstrap：全宽网格，容器中有列

Question

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

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

这可能吗？

编辑：您可以看到，绿色容器的大小与蓝色和红色一半内的 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>

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

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

Answer 3

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

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

.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 and two types of containers:

Use .container for a responsive fixed width container.

Use .container-fluid for a full width container, spanning the entire width of your viewport.

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

3) 所以你可以做一个俄罗斯套娃:
.container-fluid > .row with linear-gradient > .container > .row with content

Matryoshka is a set of brightly painted hollow wooden dolls of varying sizes, designed to nest inside one another.

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>

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

Bootstrap：全宽网格，容器中有列

Bootstrap: Full width grid with columns in container

css

grid

twitter-bootstrap

twitter-bootstrap-3

bootstrap-4

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

变体 1. 线性渐变和俄罗斯套娃