在<header>之后的Bootstrap 3全宽Jumbotron外部容器

Question

在<header>之后的Bootstrap 3全宽Jumbotron外部容器

Ada*_*own 3 css twitter-bootstrap twitter-bootstrap-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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

koa*_*dev 7

如果您查看导航栏文档中的"固定到顶部"部分,则会出现一条警告,提示您向主体添加填充:

需要身体填充

固定的导航栏将覆盖您的其他内容,除非您添加 padding到顶部<body>.尝试自己的价值观或使用下面的代码段.提示:默认情况下,导航栏高50像素.

body { padding-top: 70px; }

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

归档时间：	12 年，1 月前
查看次数：	15992 次
最近记录：	11 年前