导航栏下方的空间-固定顶部Bootstrap

bd1hkmkf 于 2023-05-11 发布在 Bootstrap

关注(0)|答案(2)|浏览(174)

在导航栏和内容div之间有一个神秘的空间（大约25px）。我使用的是Chrome浏览器和1600x900的屏幕分辨率。我已经用完全相同的问题看过其他问题，我应用了给出的答案，但问题仍然存在。我已经将导航栏底部的边距设置为0并覆盖Bootstrap 3.1.1。超文本标记语言

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <title>Title</title>
            <meta name="description" content="">
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <link rel="stylesheet" href="css/bootstrap.min.css">
            <link rel="stylesheet" href="css/hover.css">
            <link rel="stylesheet" href="css/style.css">
            <script src="js/lib/modernizr-2.6.2-respond-1.1.0.min.js"></script>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>   
        </head>

        <body>
                <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <a href="#"><img src="img/title.png"></img></a>
                        </div>
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="#">Home</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>     
                        </div><!-- /.navbar-collapse -->
                    </div><!-- /.container-fluid -->
                </nav>
                <div class="content"></div>           
        </body>

    </html>

CSS

body { 
  padding: 70px 0 0 0;
}
html, body{
  height: 100%;
}
/* Top Navigation Bar */
.navbar-fixed-top {
  background: #F7F7F7;
  min-height: 0;
  height: 45px;
  padding: 5px 0;
  margin-bottom: 0;
}
.navbar-header{
  height: 35px;
  padding: 5px 0;
}
.content{
  width: 100%;
  height: 450px;
  background: rgb(255, 240, 240);
}

twitter-bootstrap

来源：https://stackoverflow.com/questions/22888284/space-below-navbar-fixed-top-bootstrap

2条答案

按热度按时间

7gyucuyw1#

将正文填充更改为..

body { 
  padding: 45px 0 0 0;
}

http://www.bootply.com/127737

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

ve7v8dk22#

我不认为在CSS中硬编码padding-top值是个好主意，因为它取决于导航栏的高度。
我会使用一个JS脚本来动态地分配这个值：

function updatePaddingTop() {
    $("body").css({
        "padding-top" : $(".navbar").outerHeight()
    });
}
$(document).ready(() => updatePaddingTop())

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

使用ResizeObserver是为了检测导航栏大小的可能变化，并重新应用上述修复。

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

我来回答

导航栏下方的空间-固定顶部Bootstrap

2条答案

相关问题

热门标签

最新问答