Question

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

这是我到目前为止所拥有的。

HTML：

const_cast

CSS：

<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>

margin-bottom和margin-top属性是否应该关闭白色差距？

感谢您阅读本文。

编辑：我自己解决了这个问题。我添加了

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

来替换<nav class="navbar navbar-fixed-top">

Answer 1

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

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

Answer 2

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

另一个原因可能是您的图片不够高而且background-repeat设置为no-repeat。

Answer 3

在CSS中添加此行，它将消除导航栏和图像之间的差距。

body { padding-top: 50px; }

Answer 4

只需使用CSS将标题的背景颜色更改为#eeeeee。由于它们之间的空间与两个元素的颜色相同，因此可以有效地缩小导航栏和巨型飞行器之间的间隙。

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

4 个答案: