导航栏和 jumbotron 图像之间的空白答案

【问题标题】：White space between navbar and jumbotron image导航栏和 jumbotron 图像之间的空白
【发布时间】：2019-01-06 12:03:11
【问题描述】：

我已经提到了这个问题，但无济于事：How would I remove the gap between the image and the Bootstrap Nav bar?

这是我目前所拥有的。

HTML：

<body>
  <div class="nav">
    <div class="container">
      <ul class="nav nav-pills colour pull-right">
        <li class="active">
          <a href="#" id="home"
             onmousedown="clickDown(this)"
             onmouseup="clickRelease(this)">Home</a>
        </li>
        <li>
          <a href="resume.html" id="resume"
             onmousedown="clickDown(this)"
             onmouseup="clickRelease(this)">Resume</a>
        </li>
        <li>
          <a href="contact.html" id="contact"
             onmousedown="clickDown(this)"
             onmouseup="clickRelease(this)">Contact</a>
        </li>
      </ul>
    </div>
  </div>

  <div class="header">
    <div class="jumbotron">
      <h1>Software developer</h1>
    </div>
  </div>
</body>

CSS：

.nav {
    background-color: #536872;
    letter-spacing: 4px;
    line-height: 25px;
    text-transform: uppercase;
    margin-bottom: 0px;
}

.header {
    margin-top: 0px;
}

.header h1 {
    background-image: url("../images/contact.jpg");
    background-size: cover;
    background-position: 50% 50%;
    line-height: 400px;
    color: #FFFFFF;
    text-align: center;
}

.jumbotron {
    margin-top: 0px;
}

margin-bottom 和 margin-top 属性不应该关闭白色间隙吗？

感谢您阅读本文。

编辑：我自己解决了这个问题。我添加了<nav class="navbar navbar-fixed-top"> 来替换<div class="nav">

【问题讨论】：

你能把你的代码放在jsfiddle里吗？
我猜白色间隙应该是 <div class="container"></div> 的一部分。有没有应用于.container类的css？
由于某种原因，代码在 jsfiddle 上看起来很不正常（我从未使用过这个）。我很乐意在一些帮助下将其粘贴到 jsfiddle 中。

标签： html css twitter-bootstrap

【解决方案1】：

它不是标题中的空白 h1标签的边距

<h1>Software developer</h1>

所以添加样式

h1{
    margin: 0;
}

【讨论】：

【解决方案2】：

请在 css 中添加类 .jumbotron 并像这样提供 margin-bottom

.jumbotron
{
margin-bottom: 0px !important;
}

【讨论】：

这是旧的，但由于没有选择“正确答案”，我想我会分享这个工作。包括 !important 是关键。从技术上讲，该操作需要 margin-top: 0px，但这是次要的。

【解决方案3】：

您的.jumbotron 课程似乎设置了margin-top。只需将其设置为 0，它就会缩小差距。

另一个原因可能是您的图像不够高，并且您将background-repeat 设置为no-repeat。

【讨论】：

我试过了，但差距仍然存在。另外，我没有将background-repeat 设置为no-repeat。
奇怪。除了 bootstrap 和问题上的 css 之外，您还有其他 css 吗？
我还有其他处理导航栏上的导航药丸的 CSS 代码。让我更新我的 CSS 代码。

【解决方案4】：

在 CSS 中添加这一行，它将消除导航栏和图像之间的间隙。

body { padding-top: 50px; }

【讨论】：

【解决方案5】：

只需使用 CSS 将标题的背景颜色更改为#eeeeee。这有效地缩小了导航栏和 jumbotron 之间的差距，因为它们之间的空间与两个元素的颜色相同。

【讨论】：