我正在建立一个项目与Bootstrap和im面对小问题。我有一个容器下面的Navtoptop.My问题是我的容器的一些部分隐藏在nav-top标题下。我不想使用顶部边距容器。 pls见下面的html,其中im面对的问题
<html> <head> <Meta name="viewport" content="width=device-width" /> <title>Index</title> <link rel="stylesheet" href="~/stylesheets/bootstrap.css"/> <link rel="stylesheet" href="~/stylesheets/bootstrap-responsive.css"/> </head> <body> <div class="navbar navbar-fixed-top "> <div class="navbar-inner"> <div class="container"> <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="nav-collapse"><ul class="nav" id="navbar"><li ng-class="{active:section=='plunks'}" class="active"><a href="/plunks/trending"><i class="icon-home"></i>Home</a></li><li><a target="_self" href="/edit/"><i class="icon-calendar"></i>General Election 2014</a></li><li class="divider-vertical"> </li><li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown"> <i class="icon-eye-open"> </i>Assembly Elections <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#/HTML5Apps">Assembly Elections 2013</a></li> </ul> </li><li class="divider-vertical"> </li><li ng-class="{active:section=='tags'}"><a href="/tags"><i class="icon-th"></i>Constituecy</a></li><li ng-class="{active:section=='discuss'}"><a href="/discuss"><i class="icon-time"></i>Election News</a></li><li class="divider-vertical"></li><li><a href="https://github.com/filearts/plunker"><i class="icon-bell"></i>Candidate</a></li></ul></div> </div> </div> </div> <div class="container" > <ul class="nav nav-pills"> <li class="active"> <a href="#">Popular</a> </li> <li><a href="#">Trending</a></li> <li><a href="#">Latest</a></li> </ul> </div> <script src="~/Scripts/jquery.js"></script> <script src="~/Scripts/bootstrap-dropdown.js"></script> <script src="~/Scripts/Collapse.js"></script> </body> </html>
解决方法
这是通过向< body>的顶部添加一些填充来处理的。
根据Bootstrap’s documentation on .navbar-fixed-top
,尝试自己的值或使用我们的代码段下面。提示:默认情况下,导航栏高度为50像素。
body { padding-top: 70px; }
另外,看看this example的源代码,打开starter-template.css
。