所以我用新的bootstrap V3搞砸了,绝对有一件事让我疯狂.固定的顶部导航栏和跟随它的项目之间没有空格.我已经尝试更改项目上的填充(无论是jumbotron还是转盘),导航栏上的填充无效.它真的让我疯狂.任何修复？
<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>
解决方法
bootstrap documentation建议将顶部填充添加到< body> – 等于导航栏的高度：
The fixed navbar will overlay your other content,unless you add padding to the top of the
<body>
body {
padding-top: 50px; /* Whatever the height of your navbar is; the
default is 50px */
}
