3

从 Bootstrap 3 开始并习惯它。

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

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

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

有人可以告诉我哪里出了问题，以及如何在不制作一些将其推倒的黑客 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>
4

2 回答 2

7

如果您查看导航栏文档上的“固定到顶部”部分，则会有一条警告提示您向正文添加填充：

需要身体填充物

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

body { padding-top: 70px; }

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

于 2013-09-04T16:05:05.410 回答
0

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

于 2014-10-19T11:58:05.730 回答