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

qlckcl4x 于 2023-05-11 发布在 Bootstrap

关注(0)|答案(5)|浏览(155)

下面的代码总是在页面的顶部显示一个导航栏。我需要第二个容器（内容）定位在导航栏的末尾，而不是在它下面。目前，第二个容器位于导航栏下。
我可以在内容的顶部添加一些空白的空间，但我不确定这是一个好的方法。有办法解决吗？

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

twitter-bootstrap

来源：https://stackoverflow.com/questions/26867846/what-is-the-best-way-to-add-some-space-after-bootstrap-navbar

5条答案

按热度按时间

oknwwptz1#

2018年更新
Bootstrap 3

根据Bootstrap文档（http：//getbootstrap.com/components/#navbar-fixed-top），您应该在主体上使用padding-top。
“固定导航栏将覆盖您的其他内容，除非您在顶部添加填充。尝试您自己的值或使用下面的代码片段。提示：默认情况下，导航栏为50 px高。”

body { padding-top: 70px; }

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

Bootstrap 4

Bootstrap 4中的fixed-top导航栏也建议使用填充，以防止内容隐藏在正文顶部。您可以为padding-top添加自定义CSS，或者在body标签上使用pt-5实用程序类：
<body class="pt-5"></body>

赞(0）回复(0）举报 2023-05-11

nuypyhwy2#

你需要一些像这样的CSS：

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

或者像这样：

.navbar {
  margin-bottom: 20px;
}

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

赞(0）回复(0）举报 2023-05-11

xqkwcwgp3#

只需将margin-top: 50px;添加到底层容器。
50px必须是导航栏的高度。

赞(0）回复(0）举报 2023-05-11

bxgwgixi4#

您可能不想在CSS中硬编码padding-top值，因为它取决于导航栏的高度。
下面是一个使用JavaScript的动态解决方案：

let additionalPadding = 5; // 5px
function updatePaddingTop() {
    $("body").css({
        "padding-top" : $(".navbar").outerHeight() + additionalPadding
    });
}
$(document).ready(() => updatePaddingTop())

此外，如果您的导航框可以更改大小（例如，在窗口调整大小时），您可能希望检测此类更改并重新应用修复：

var observer = new ResizeObserver(() => {
    updatePaddingTop();
}).observe($(".navbar")[0]);

赞(0）回复(0）举报 2023-05-11

4nkexdtk5#

我可以用下面的代码解决这个问题。

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

赞(0）回复(0）举报 2023-05-11

我来回答

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

5条答案

相关问题

热门标签

最新问答