twitter-bootstrap <header> 之后的 Bootstrap 3 全宽 Jumbotron 外部容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18618567/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 Full-width Jumbotron outside container after <header>
提问by Adam Brown
Starting out with Bootstrap 3 and just getting used to it.
从 Bootstrap 3 开始并逐渐习惯它。
I've copied the navbar from the Bootstrap 3 docs becuase it has the exact functionality that I want and why invent the wheel hey.
我已经从 Bootstrap 3 文档中复制了导航栏，因为它具有我想要的确切功能以及为什么要发明轮子嘿。
I want to put a Jumbotronafter the header but I want it to be full width, so according to the docs I don't enclose it in a containerdiv.
我想在标题后面放一个Jumbotron，但我希望它是全宽的，所以根据文档我没有将它包含在容器div 中。
The problem is that when I omit the container div it slides back under the header but I want it to start where the header ends. If I put it inside a container it sits nicely under it.
问题是，当我省略容器 div 时，它会滑回到标题下，但我希望它从标题结束的地方开始。如果我把它放在一个容器里，它就会很好地放在它下面。
Can someone show me where I'm going wrong and how to fix it without making some hack div that pushes it down. Many thanks.
有人可以告诉我我哪里出错了，以及如何在不制作一些 hack div 的情况下修复它。非常感谢。
I want to keep the container in the header tag becuase I don't want these elements stretching to the sides.
我想将容器保留在标题标签中，因为我不希望这些元素延伸到两侧。
<!-- 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>
回答by koala_dev
If you look at the "Fixed to top" section on the navbar docs, there's an alert urging you to add padding to the body:
如果您查看导航栏文档上的“固定到顶部”部分，则会有一条提醒您向正文添加填充：
Body padding required
The fixed navbar will overlay your other content, unless you add
paddingto the top of the<body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }Make sure to include this after the core Bootstrap CSS.
需要身体填充
固定导航栏将覆盖您的其他内容，除非您添加
padding到<body>. 尝试您自己的价值观或使用我们下面的代码片段。提示：默认情况下，导航栏高 50 像素。
body { padding-top: 70px; }确保在核心 Bootstrap CSS 之后包含它。
回答by me gusta mucho
Adding a container inside the jumbotron will also fix this.
在超大屏幕中添加一个容器也可以解决这个问题。
