Question

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

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

enter image description here

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

Answer 1

2018年更新

Bootstrap 3

根据Bootstrap文档（http://getbootstrap.com/components/#navbar-fixed-top），您应该在身体上使用padding-top ..

＆＃34;固定的导航栏将覆盖您的其他内容，除非您添加填充到顶部。尝试自己的价值观或使用我们的下面的片段。提示：默认情况下，导航栏高50像素。＆＃34;

body { padding-top: 70px; }

演示：http://www.bootply.com/Ob3Bajkv1f

Bootstrap 4

对于Bootstrap 4中的fixed-top Navbar，也建议使用填充，以防止内容隐藏在正文的顶部。您可以为padding-top添加自定义CSS，也可以在正文标记上使用pt-5实用程序类：

<body class="pt-5"></body>

Answer 2

你需要这样的CSS：

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

或者像这样：

.navbar {
  margin-bottom: 20px;
}

确保你只使用你需要的东西，

Answer 3

只需将margin-top: 50px;添加到基础容器即可。

50px必须是导航栏的高度。

Answer 4

我能够使用以下代码解决此问题。

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

在Bootstrap导航栏后添加一些空间的最佳方法是什么？

4 个答案: