个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 11:42:01 25 4
gpt4 key购买 nike

我想去掉导航栏和背景图片之间的空白。导航栏和背景图像之间有大约 0.5 英寸的空白。我已经尝试了包裹在导航栏周围的容器标签，并且在我将“导航栏标题”更改为“navbar-header-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;
}

最佳答案

我认为问题出在您的 CSS 代码中:

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

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

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

如果我错了，请纠正我。

关于html - 我如何摆脱导航栏和背景图像之间的空白区域？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31258115/

25 4 0
文章推荐： windows - 混合 Windows 和 *nix 环境 - 'local' 后缀问题
文章推荐： c++ - 如何使用 "Curiously recurring template"模式
文章推荐： java - 使用按位运算符对密码类进行编码
文章推荐： linux - 我如何编译 mips gnu？