Question

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

<!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);
}

Answer 1

将身体填充更改为..

body { 
  padding: 45px 0 0 0;
}

http://www.bootply.com/127737

navbar-fixed-top Bootstrap下方的空间

1 个答案: