我遇到问题。Navbar重叠旋转木马
我在我的网站上做了一个改动,我想在我的网站上加入一个全角旋转木马。而不是一个jumbotron。 问题是我的导航栏重叠了jumbotron区域,标题和所有内容。
这里是我的html:
<div class="nav-area">
<div class="container"> <!-- Start Container -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="dentalclean logo" src="images/logo_2x.png">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right">
<li class="active"><a href="index.html">Pagina Inicial <span class="sr-only">(current)</span></a></li>
<!-- <li><a href="#">Contactos</a></li> -->
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div> <!-- End Container -->
</div>
<span itemscope itemtype="http://schema.org/LocalBusiness">
<div class="hero-section"> <!-- Start Hero Section -->
<div id="slider_dentalclean" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slider_dentalclean" data-slide-to="0" class="active"></li>
<li data-target="#slider_dentalclean" data-slide-to="1" class=""></li>
<li data-target="#slider_dentalclean" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="Dentista Leiria" src="images/hero-img.png">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>LOOOOOOOOOOOOOOOOOOOL</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item">
<img alt="Second slide" src="images/hero-img.png">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img alt="Third slide" src="images/hero-img.png">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
</div>
我为缺乏组织的道歉。
我正在使用sass和bootstrap的方式。
这里是随之而来的问题:https://www.dropbox.com/s/bigm6291gmwgcf6/Screenshot%202015-04-06%2018.46.43.png?dl=0
非常感谢你,我搜索了这里所有的答案,但我无法找到一个工作。
小提琴:https://jsfiddle.net/yjbjvtx2/
CSS:
.nav-area{
position:absolute;
top: 0;
}
#slider_dentalclean{
margin-top: 0;
z-index: -1;
}
我发现我希望在我的网站上确切的事情:http://getbootstrap.com/examples/carousel/
但我不知道他们是如何做的转盘标题不走到导航栏后面。
这确实需要在与额外的CSS小提琴。为什么你在主div上有一个-73px的边距?它看起来像它将被固定,如果你将其设置为0或某些积极的东西。 – austinthedeveloper
现在会提琴。 –