Html 在引导navbar之后添加一些空间的最佳方法是什么？

以下代码始终在页面顶部显示导航栏。 我需要将第二个容器（内容）放置在导航栏的末端，而不是它下面。 此时，第二个容器位于导航栏下方

我可以在内容顶部添加一些空白，但我不确定这是一个好方法。 你知道怎么解决吗

 <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>

切换导航

只需添加

页边距顶部：50px到参考底图容器

50px
必须是导航栏的高度。
您需要一些如下CSS：

body {
  padding-top: 20px;
  padding-bottom: 20px;
}

.navbar {
  margin-bottom: 20px;
}

或者像这样：

body {
  padding-top: 20px;
  padding-bottom: 20px;
}

.navbar {
  margin-bottom: 20px;
}

请确保只使用您需要的内容，
我可以使用以下代码解决此问题

  <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>


切换导航






2018年更新

引导3

根据Bootstrap文档（），您应该在主体上使用
padding top

“固定导航栏将覆盖您的其他内容，除非您添加
填充到顶部。尝试您自己的值或使用我们的
提示：默认情况下，导航栏的高度为50px。“

演示：


引导4

引导4中的
固定顶部
导航栏也建议使用填充，以防止内容隐藏在主体顶部。您可以为
padding top
添加自定义CSS，或在body标记上使用
pt-5
实用程序类：

我需要这样的东西，导航栏后面的一些空间只需将
边距顶部：75px
（或任何有效值）添加到
主体
元素（或导航栏下方的
div
）中即可。谢谢，但这看起来更像是一种黑客行为。我有兴趣以正确的方式使用bootstramp。