twitter-bootstrap 在 Bootstrap 导航栏之后添加一些空间的最佳方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26867846/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the best way to add some space after Bootstrap navbar?
提问by GibboK
The following code displays a navbar always on the top of the page. I need the second container (content) to be positioned at the end of the navbar and not under it. At the moment second container is under the navbar.
以下代码始终在页面顶部显示导航栏。我需要将第二个容器（内容）定位在导航栏的末尾而不是它的下方。目前，第二个容器位于导航栏下方。
I could add some empty space on the top of the content are, but I am not sure it is a good approach. Any idea how to solve it?
我可以在内容顶部添加一些空白区域，但我不确定这是一个好方法。知道如何解决吗？
<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>
回答by Zim
Updated 2018
2018 年更新
Bootstrap 3
引导程序 3
According to the Bootstrap docs (http://getbootstrap.com/components/#navbar-fixed-top) you should use padding-topon the body..
根据 Bootstrap 文档（http://getbootstrap.com/components/#navbar-fixed-top），您应该padding-top在身体上使用..
"The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high."
“固定导航栏将覆盖您的其他内容，除非您在 顶部添加填充。尝试您自己的值或使用我们下面的代码片段。提示：默认情况下，导航栏高 50 像素。”
body { padding-top: 70px; }
Demo: http://www.bootply.com/Ob3Bajkv1f
演示：http: //www.bootply.com/Ob3Bajkv1f
Bootstrap 4
引导程序 4
Padding is also recommended for the fixed-topNavbar in Bootstrap 4 to prevent content hiding at the top of the body. You can add custom CSS for padding-topor use the pt-5utility class on the body tag:
fixed-topBootstrap 4 中的导航栏也建议使用填充，以防止内容隐藏在正文的顶部。您可以为body 标记添加自定义 CSSpadding-top或使用pt-5实用程序类：
<body class="pt-5"></body>
<body class="pt-5"></body>
回答by Edgar Ortega
You would need some CSS like this:
你需要一些这样的 CSS：
body {
padding-top: 20px;
padding-bottom: 20px;
}
Or like this:
或者像这样：
.navbar {
margin-bottom: 20px;
}
Make sure you only use what you need,
确保你只使用你需要的东西，
回答by Wavemaster
Just add margin-top: 50px;to the underlaying container.
只需添加margin-top: 50px;到底层容器。
50pxhas to be the height of your navbar.
50px必须是导航栏的高度。
回答by GibboK
I was able to solve this issue using the following code.
我能够使用以下代码解决这个问题。
<div class="container">
<!-- navbar -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">KanbanBoard</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Boards</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">User</a></li>
</ul>
</div>
</div>
</nav>
<!-- boards -->
<div ng-view></div>
</div>
