css - twitter bootstrap - 是否可以撤消 "container"边距

Question

我的 html 看起来像这样:

<div class="container">
    <div class="header-content">
       hello!
    </div>
</div>

我最近遇到了这样一种情况，我需要“标题”100% 成为全宽背景的窗口。通常我会这样做 css:

<div class="header-background-color">
    <div class="container">
        <div class="header-content">
          hi!
       </div>
   </div> 
</div>

不幸的是，我对框架相当深入，无法包装容器。我需要在容器内构建它。

<div class="container">
    <div class="header-background-color">
        <div class="container">
            <div class="header-content">
               hi!
            </div>
        </div>
    </div>
</div>

我想不出一个方法来完成这个，我想知道这是否可能。

如果我将此 css 用于标题背景颜色

background: blue;
left:0;
position: absolute;
width: 100%;

元素看起来是对的，但是页面流被打断了。

有谁知道我的目标是否可以达到？

我做了一个 bootply 来说明这个 http://www.bootply.com/129060

Answer 1

您可以使用子 (>) 选择器来选择第一个容器元素并将其宽度设置为 100% 并移除填充。

.example-3 > .container {
  width: 100%;
  padding: 0;
}

这假设你总是有一个带有唯一类名的包装器(或者使用 body 如果它是第一个 div)，但这也允许你删除 位置: absolute 导致重叠，高度可以保持动态。

查看 fork 的 bootply:http://www.bootply.com/129065

我添加了一个按钮，用于将段落插入到 div 中，因此您可以看到它如何不受高度变化的影响。