我是第一次尝试使用 Twitter Bootstrap(也是第一次使用前端),但是我已经遇到了问题。一是 navbar
总是显示在其他组件之上。
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</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">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="container theme-showcase" role="main">
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
在这种情况下,例如 div
.container .theme-showcase
在下面,我永远看不到它。
我错过了什么?谢谢。
编辑:移除固定顶部不是解决方案,我需要导航始终存在
最佳答案
.navbar-fixed-top
将使导航栏 position: fixed
将其从流程中移除,以便其他元素将从页面顶部开始。如果你想要一个粘性导航,将顶部填充添加到 .container.theme-showcase
或者如果你想要静态导航栏,那么只需删除 .navbar-fixed-top
类.
关于html - Bootstrap 将组件导航置于其他组件之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35816459/