Html 新引导程序中的导航栏和项目之间没有空格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18884731/
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
No space between navbar and items after in the new bootstrap?
提问by Jeff Meigs
So I'm messing around with the new bootstrap V3, and there is absolutely one thing that is driving me insane. There is no space between a fixed top navbar and the item that follows it. I've tried changing the padding on the item(whether it be jumbotron or carousel) and the padding on the navbar to no avail. Its literally driving me insane. any fixes?
所以我在搞新的引导程序 V3，绝对有一件事情让我发疯。固定的顶部导航栏和它后面的项目之间没有空间。我试过更改项目上的填充（无论是大屏幕还是旋转木马）和导航栏上的填充都无济于事。它真的让我发疯。任何修复？
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<a href="index.html" class="navbar-brand">Gaming</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=
".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Shows</a></li>
<li><a href="#">Cheats</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-
toggle="dropdown">Forums<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">General</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Games</a></li>
</ul>
</li>
<li><a href="#">eSports</a></li>
</ul>
</div>
</div>
</div>
<div class="divider"></div>
<div class="container">
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/banner.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p>This is an example layout with carousel that uses the Bootstrap 3 styles.
<a title="Bootstrap 3" href="http://getbootstrap.com" class="">Bootstrap 3 RC 1
is now available!</a></p>
<p><a class="btn btn-large btn-primary" href="#">Sign up today</a>
</p></div>
</div>
</div>
<div class="item">
<img src="img/banner.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names
have completely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/banner.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Percentage-based sizing</h1>
<p>With "mobile-first" there is now only one percentage-based grid.</p>
<p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
回答by adrift
The bootstrap documentationrecommends adding top padding to the <body>- equal to the height of your navbar:
该引导文件建议将顶部填充到<body>-等于你的导航栏的高度：
The fixed navbar will overlay your other content, unless you add padding to the top of the
<body>
固定导航栏将覆盖您的其他内容，除非您在顶部添加填充
<body>
body {
padding-top: 50px; /* Whatever the height of your navbar is; the
default is 50px */
}
