html - Bootstrap "container"背景

Question

我已经绞尽脑汁想了很长一段时间，但仍然没有找到变体，但我将在此处描述。 我正在使用 Twitter Bootstrap 2.3.2。我想改变“容器”的背景。当我应用更改时，这张图片也是“navbar”和“hero-unit”的背景。

您可以在这里发现同样的事情: http://getbootstrap.com/2.3.2/examples/hero.html 通过这样设置“容器”设置的“检查元素”:

background-image: ('url');

它不仅会设置正文的图像，还会设置“导航栏”的图像。

当然，我清楚地理解为什么在我的例子中，“navbar”和“hero-unit”的背景会发生变化，因为我在 HTML 中得到了这个:

<div class="container">
 <div class="navbar">
  <div class="hero-unit">
</div>
 </div>
  </div>

但我需要的是，“英雄单元”和主要内容“容器”位于同一行(如上面提供的链接)。如果将它们应用于“容器”类，它会起作用，但背景是公平的。我必须将哪些属性应用于新类，以便它们大小相等(请参阅链接)。我想我有点卡住了，急需一些支持。

我想我必须创建两个新类？一个用于平等显示“容器”、“英雄单元”和“导航栏”，另一个(具有相同的宽度属性)设置背景。但我想不通:(

Answer 1

您的问题有一个简单的解决方案。

使用正确的标记。将 hero-unit 放在 navbar 内，然后将 navbar 放在 container.

<div class="navbar">
  <!-- Other stuff -->
</div>

<div class="container">
  <div class="hero-unit"></div>
</div>

这是您应该使用的标记。 然后您可以使用您的 CSS 属性创建一个单独的类，并使用容器类将该类添加到您的 DIV。