html - 如何用背景色填充整个div

Question

我试图在 bootstrap 中获取背景色来填充子 div 中的整个 div，但我完全卡住了。我希望右边的部分是黄色的，但它只是突出显示了 div 中的文本。

这是一个 fiddle .

我知道我遗漏了一些非常明显的东西，但我如何让黄色填充整个 col-lg-6 div？

.new-section {
  height: 100%;
  padding-top: 150px;
  text-align: center;
  background: #eee;
}

.yellow {
  background-color: yellow;
}

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

<section id="new" class="new-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <h1>Section left</h1>
      </div>
      <div class="col-lg-6 yellow">
        <h1>Section right</h1>
      </div>
    </div>
  </div>
</section>

Answer 1

发生这种情况是因为您将 .col-lg-* 与 .container 一起使用，它只有 width:1170px

所以将 .container 更改为 .container-fluid

在 bootstrap docs 中查看有关容器的更多信息

.new-section {
  height: 100%;
  padding-top: 150px;
  text-align: center;
  background: #eee;
}
.yellow {
  background-color: yellow;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- New Exhibit Section -->
<section id="new" class="new-section">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-6 col-lg-6">
        <h1>Section left</h1>
      </div>

      <div class="col-xs-6 col-lg-6 yellow">
        <h1>Section right</h1>
      </div>
    </div>
  </div>
</section>