no space between navbar and items after in the new bootstrap?
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 btween 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?
<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>
No comments:
Post a Comment