如何摆脱导航栏和背景图像之间的空白？答案

【问题标题】：How do i get rid of white space between navbar and background image?如何摆脱导航栏和背景图像之间的空白？
【发布时间】：2015-07-07 12:45:55
【问题描述】：

我想去掉导航栏和背景图片之间的空白。导航栏和背景图像之间大约有 0.5 英寸的空白。我已经尝试过包裹在导航栏周围的容器标签，并且在我将“导航栏标题”更改为“导航栏标题-sm”之前，这个空白区域直接出现在导航栏之后。但是，我需要“navbar-header-sm”，否则导航栏会过大。我只是想让背景图片与导航栏相接。

****** 1. 这里是 HTML：

<!doctype html>
<html class="full" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QuirkyBear</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/stylesheet.css" rel="stylesheet">
</head>
<body>
    <div class="row">
        <nav class="navbar navbar-custom" role="navigation">
            <div class="navbar-header-sm">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            </div>
            <div class="collapse navbar-collapse" id="collapse">
            <ul class="nav navbar-nav">
                <li><a href="index.html"><img src= "images/QBlogo.png" /></a></li>
                <li><a href="#">Work</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            </div>
        <nav>
    </div>
<img src="images/QBhead.png" class="img-responsive">    
<!--javascript-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"</script>
</body>
</html>

****** 2.这里是CSS：

body {
    padding: 0px;
    margin-top: align;
    background: url (..images/QBhead.png) no-repeat center center fixed;
    background size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.navbar {
    margin=bottom: 0;
}
.navbar-custom {
    background-color:#CCE1F4;
    border-radius:2px;
    font-size: 24px;
}
.navbar-custom .navbar-brand {
    color: #2f4f7f;
}
.navbar-custom .navbar-nav > li > a {
    color: #2f4f7f;
}
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
    color: #000000;
    background-color: transparent;
}
.navbar-custom .navbar-toggle {
    border-color: #2f4f7f;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
    background-color: #2f4f7f;
}
.navbar-custom .navbar-toggle .icon-bar {
     background-color: #2f4f7f;
}

【问题讨论】：

它应该是margin-bottom:0;，你在.navbar类上有margin=bottom:0;。您还需要在 background-size 中添加一个破折号，并且在 body 标记中 url(...) 之后没有空格。

标签： html css twitter-bootstrap background-image navbar

【解决方案1】：

我认为问题在于您在 CSS 中的代码是这样的：

.navbar-custom {
    background-color:#CCE1F4;
    border-radius:2px;
    font-size: 24px;
}

我通过删除背景颜色对其进行了更改，它应该可以按照我希望的方式工作，并且空白消失了，您的导航现在位于背景之上。 :) 我认为您不应该将其称为空格，这很令人困惑。可能是白色背景。

.navbar-custom {
    border-radius:2px;
    font-size: 24px;
}

如果我错了，请纠正我。

【讨论】：