以下代码始终在页面顶部显示导航栏。
我需要将第二个容器(内容)放置在导航栏的末尾而不是其下方。
目前第二个容器位于导航栏下方。
我可以在内容顶部添加一些空白,但我不确定这是一个好方法。
知道如何解决吗?
<div class="container">
<div class="row">
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</nav>
</div>
</div>
<div class="row">
<div ng-view></div>
</div>
</div>
2018年更新
引导程序3
根据 Bootstrap 文档(http://getbootstrap.com/components/#navbar-fixed-top http://getbootstrap.com/components/#navbar-fixed-top)你应该使用padding-top
身体上..
“固定导航栏将覆盖您的其他内容,除非您添加
填充到 的顶部。尝试您自己的价值观或使用我们的价值观
下面的片段。提示:默认情况下,导航栏的高度为 50 像素。”
body { padding-top: 70px; }
Demo: http://www.bootply.com/Ob3Bajkv1f http://www.bootply.com/Ob3Bajkv1f
引导程序4
还建议使用衬垫fixed-top
Bootstrap 4 中的导航栏可防止内容隐藏在正文顶部。您可以添加自定义 CSSpadding-top
或使用pt-5
body 标签上的实用程序类:
<body class="pt-5"></body>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)