Question

我想摆脱导航栏和背景图片之间的空白区域。导航栏和背景图像之间大约有0.5英寸的空白区域。我已经尝试了在导航栏周围缠绕的容器标签，并且在我更改＆＃34;导航栏标题之前已经工作了＃34;到＆＃34; navbar-header-sm＆＃34;一旦我这样做，这个空白区域就会直接出现在导航栏之后。但是，我需要＆＃34; navbar-header-sm＆＃34;因为否则导航栏超大。我只是想让背景图像与导航栏相遇。

****** 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;
}

Answer 1

我认为问题出在你的CSS代码中：

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

我通过删除背景颜色来改变它，它应该按照你希望的方式工作，并且空白消失，你的导航现在在背景之上。 :)你不应该把它称为空白我认为，这是令人困惑的。也许白色背景。

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

如果我错了，请纠正我。

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

1 个答案: