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

Question

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

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

这可能吗？

编辑：你可以看到，绿色容器的尺寸与蓝色和红色半边的col-6不同。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

变式2.将容器分为两部分

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

变体1.线性梯度＆amp;俄罗斯套

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

2）Bootstrap有rows和two types of containers：

  

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

     

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

     

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

3）所以你可以做一个俄罗斯套娃：
 .container-fluid＆gt; .row with linear-gradient＆gt; .container＆gt; .row with content

  

俄罗斯套娃是一套颜色各异的彩色空心木娃娃，设计用于互相嵌套。

4）col-xs-6相当于col-xs-6 col-sm-6 col-md-6 col-lg-6。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个

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

CSS

{{1}}

Answer 3

这样的东西？

int test = list.GroupBy(s => s.id).
               .Where(g=> g.Count() == 1)
               .Count();

* { color: white; }

.blue-half {
  background: blue;
}

.red-half {
  background: red;
}

<强>更新 我尝试用你的评论来创建我正在阅读的内容，重新排列格式不正确

更新2

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

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

Answer 4

尝试一下：

acks=all

CSS：

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