<header> 之后的 Bootstrap 3 Full-width Jumbotron 容器外答案

【问题标题】：Bootstrap 3 Full-width Jumbotron outside container after <header><header> 之后的 Bootstrap 3 Full-width Jumbotron 容器外
【发布时间】：2013-09-04 15:57:34
【问题描述】：

从 Bootstrap 3 开始并习惯它。

我从 Bootstrap 3 文档中复制了导航栏，因为它具有我想要的确切功能以及为什么要发明轮子嘿。

我想在标题之后放置一个 Jumbotron，但我希望它是全宽的，所以根据文档，我不会将它包含在 container div 中.

问题是，当我省略容器 div 时，它会滑回标题下方，但我希望它从标题结束的地方开始。如果我把它放在一个容器里，它就很好地放在它下面。

谁能告诉我哪里出了问题，以及如何在不制作一些 hack div 的情况下解决它。非常感谢。

我想将容器保留在标题标签中，因为我不希望这些元素伸展到两侧。

<!-- Docs master nav -->
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="../" class="navbar-brand"><img src="imagenes/logo.png" /></a>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav navbar-right pull-down">
        <li class="">
          <a href="#">Menu</a>
        </li>
        <li class="">
          <a href="#">Galería</a>
        </li>
        <li class="">
          <a href="#">Calendario</a>
        </li>
        <li class="">
          <a href="#">BH Musicos / Talentos</a>
        </li>
        <li class="">
          <a href="#">Blog</a>
        </li>
        <li class="">
          <a href="#">Contacto</a>
        </li>
      </ul>
    </nav>
  </div>
</header>
<div class="jumbotron">
  <h1>Hello World</h1>
  <p>Testing one two three</p>
</div>

【问题讨论】：

请注意，bs-docs-nav 类不是必需的
@koala_dev，bs-docs-nav 类有什么作用？
@ayjay .bs-docs-nav 不是 Bootstrap 的一部分，它仅在文档中用于添加一些自定义样式

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

如果您查看 navbar docs 上的“固定到顶部”部分，会看到提醒您为正文添加填充的警告：

需要身体填充

固定的导航栏将覆盖您的其他内容，除非您添加 padding 到 <body> 的顶部。尝试您自己的价值观或使用我们的 sn-p 下面。提示：默认情况下，导航栏的高度为 50px。

body { padding-top: 70px; }

确保在核心之后包含它引导 CSS。

【讨论】：

是否可以在正文中添加一些内容以使其在引导程序中更具响应性，即当视口缩小时，标题的高度变大，下面的内容也会下降？跨度>
@AdamBrown 不知道有没有，只能想个javascript方案来监听window resize事件，根据header高度调整padding
@AdamBrown 实际上，您还可以在菜单开始溢出到新行的位置设置媒体查询并在那里增加填充

【解决方案2】：

在 jumbotron 中添加一个容器也可以解决这个问题。

【讨论】：