两个div，宽度为50％，而容器内容为

Question

如何完成图像中的外观？

这是列的常规Bootstrap代码，但前两列应位于background内的白色.container上，而另外两列位于黑色background上且黑色{{1一直走到最后。

CodePen

background

Answer 1

您可以在祖先元素上使用线性渐变背景。

我添加了一个媒体查询来处理窄视图。不知道你真的想在这里做什么。

查看全屏以查看宽视图：

.container {
  border: 1px solid #f01;
}
.col-md-3 {
  border: 1px solid #333;
}
.bg {
  padding: 30px;
  background: linear-gradient(to right, #ffffff 0%, #ffffff 49%, #ffffff 50%, #000000 50%, #000000 100%, #000000 100%);
}
@media (max-width: 992px) {
  .bg {
    padding: 30px;
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 49%, #ffffff 50%, #000000 50%, #000000 100%, #000000 100%);
  }
}

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


<div class="bg">
  <div class="container">
    <div class="col-md-3">
      <p>First column</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia recusandae omnis praesentium dolorum soluta aperiam iste eum, neque necessitatibus pariatur. Neque nam modi mollitia in autem molestiae corporis harum placeat quos quaerat, labore ex
        ratione, possimus quod quo soluta libero, quis dolor! Porro similique natus eius et voluptatibus autem dolores.</p>
    </div>
    <div class="col-md-3">
      <p>Second column</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia recusandae omnis praesentium dolorum soluta aperiam iste eum, neque necessitatibus pariatur. Neque nam modi mollitia in autem molestiae corporis harum placeat quos quaerat, labore ex
        ratione, possimus quod quo soluta libero, quis dolor! Porro similique natus eius et voluptatibus autem dolores.</p>
    </div>
    <div class="col-md-3">
      <p>Third column</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia recusandae omnis praesentium dolorum soluta aperiam iste eum, neque necessitatibus pariatur. Neque nam modi mollitia in autem molestiae corporis harum placeat quos quaerat, labore ex
        ratione, possimus quod quo soluta libero, quis dolor! Porro similique natus eius et voluptatibus autem dolores.</p>
    </div>
    <div class="col-md-3">
      <p>Fourth column</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia recusandae omnis praesentium dolorum soluta aperiam iste eum, neque necessitatibus pariatur. Neque nam modi mollitia in autem molestiae corporis harum placeat quos quaerat, labore ex
        ratione, possimus quod quo soluta libero, quis dolor! Porro similique natus eius et voluptatibus autem dolores.</p>
    </div>
  </div>
</div>

Answer 2

在linear-gradient中使用body，将.container作为父级，并且.container不会有任何包装

  

很抱歉，我在困扰你，但我的意思是放置图像   像这样   image.prntscr.com/image/78940c8115c943a186500ac24556758b.jpeg

添加另一个父div（body的孩子）并将background-image添加到div

body {
  background: linear-gradient(to right, white 0%, white 50%, black 50%, black 50%, black 100%);
}
#wrap {
  background: url(//lorempixel.com/200/200) no-repeat  66.6% 0 / 25% auto
}
.container {
  border: 1px solid #f01;
}
[class^="col-"] p {
  color: white;
  height: 75px;
  background-color: blue
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrap">
  <div class="container">
    <div class="col-xs-3 col-md-3">
      <p>First column</p>
    </div>
    <div class="col-xs-3  col-md-3">
      <p>Second column</p>
    </div>
    <div class="col-xs-3 col-md-3">
      <p>Third column</p>
    </div>
    <div class="col-xs-3 col-md-3">
      <p>Fourth column</p>
    </div>
  </div>
</div>

Answer 3

另外一层嵌套应该照顾它：

<div class="container">
<div class="col-md-6">
<div class="col-md-3">
  <p>First column</p>
  </div>
<div class="col-md-3">
  <p>Second column</p>
  </div>
</div>
<div class="col-md-6">
<div class="col-md-3">
  <p>Third column</p>
  </div>
<div class="col-md-3">
  <p>Fourth column</p>
  </div>
</div>
</div>

您可能需要向md-6类元素添加ID以管理背景颜色。