twitter-bootstrap 如何用背景颜色填充整个div

How to fill entire div with background color

提问by hcgriggs

I'm trying to get a background color to fill the entire div in a child div in bootstrap, but I'm completely stuck. I want the right section to be yellow, but it's only highlighting the text in the div.

我正在尝试获取背景颜色以填充引导程序中子 div 中的整个 div，但我完全卡住了。我希望正确的部分是黄色的，但它只是突出显示了 div 中的文本。

Here's a fiddle.

这是一个小提琴。

I know I'm missing something really obvious, but how do I get yellow to fill the entire col-lg-6div?

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

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

回答by dippas

This is happening because you are using .col-lg-*with .containerwhich only has width:1170px

发生这种情况是因为您正在使用.col-lg-*with .containerwhich only haswidth:1170px

So change .containerto .container-fluid

所以.container改为.container-fluid

See more info about containers in 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>

回答by chino

or just:

要不就：

.yellow {
    background-color: yellow;
    padding: 0 0;
}

回答by Johannes

Keep in mind that h1has top and bottom margins that will be taken over by its wrapper and will notbe affected by background-color since they are outside of the block element. You could remove the h1 tag and style the parent container in a similar way (but using padding instead of margins):

请记住，h1顶部和底部边距将由其包装器接管，并且不会受到背景颜色的影响，因为它们位于块元素之外。您可以删除 h1 标记并以类似的方式设置父容器的样式（但使用填充而不是边距）：

https://jsfiddle.net/j33wz2o6/1/

https://jsfiddle.net/j33wz2o6/1/