导航栏和图像显示之间的线

时间：2019-04-20 16:32:47

标签： html css twitter-bootstrap bootstrap-4

我正在尝试使图像位于导航栏的后面，导航栏位于图像的顶部，尽管图像必须像导航栏一样从页面顶部开始，但我不这样做知道为什么它们之间会显示白线。

website

这是一个有角度的6网站（在这种情况下并不重要），我正在使用引导程序。 （我知道将所有这些代码放在一个样式表中并不是很费劲，我只是对此感到困惑，所以可以重构）。

我试图模糊定位，z索引和边距，但没有任何效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Angular Bootstrap Demo</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <!-- Nav bar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarColor02"
        aria-controls="navbarColor02"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarColor02">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#"
              >Home <span class="sr-only">(current)</span></a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input
            class="form-control mr-sm-2"
            type="text"
            placeholder="Search"
          />
          <button class="btn btn-secondary my-2 my-sm-0" type="submit">
            Search
          </button>
        </form>
      </div>
    </nav>
    <!--  -->

    <!-- main app root -->
    <app-root></app-root>
    <!--  -->
    <!-- Dependencies -->
    <script
      src="https://code.jquery.com/jquery-3.1.1.min.js"
      integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
      integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
      crossorigin="anonymous"
    ></script>
    <!--  -->
  </body>
</html>

样式表：

.jumbotron {
  color: #fff;
  height: 500px;
}

html {
  background-image: url("../assets/images/BBLogo.png");
}

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

#front-page-links {
  margin: auto;
  width: 50%;
  padding: 10px;
}

.logo {
  width: 100%;
  height: 100vh;
  background: url(../assets/images/BBLogo.png) no-repeat 50% 50%;
  background-size: cover;
}

/* Navbar */

@font-face {
  font-family: circuitBored;
  src: url(../assets/fonts/CircuitBoredNF.ttf);
}

@font-face {
  font-family: computerFont;
  src: url(../assets/fonts/jura.demibold.ttf);
}

.navbar.navbar-inverse {
  margin-bottom: 0;
}

nav {
  position: fixed;
  width: 100%;
  line-height: 20px;
  margin-bottom: 0;
}

nav ul {
  line-height: 60px;
  list-style: none;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
  color: #fff;
  font-family: computerFont !important;
  font-size: 16px;
  font-weight: bold;
  padding: 0;
  text-align: right;
  margin: 0;
  padding-right: 40px;
  transition: 1s;
}

nav.black ul {
  background: #000;
  font-family: computerFont !important;
  font-size: 16px;
  font-weight: bold;
}

nav ul li {
  display: inline-block;
  font-family: computerFont;
  font-size: 16px;
  font-weight: bold;
  padding: 16px 40px;
}

nav ul li a {
  text-decoration: none;
  font-family: computerFont;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.menu-icon {
  line-height: 60px;
  width: 100%;
  background: #000;
  text-align: right;
  box-sizing: border-box;
  font-family: computerFont;
  padding: 15px 24px;
  cursor: pointer;
  color: #fff;
  display: none;
}

.menu {
  font-family: computerFont;
  font-size: 16px;
  font-weight: bold;
}

.menu ul li a:hover {
  background-color: #35701c;
}

.menu li ul {
  display: none;
  position: absolute;
}

.menu li:hover ul {
  display: grid;
  top: 55px;
}

.submenuD li {
  position: relative;
  text-align: left;
  z-index: 1;
}

.copyright {
  font-family: "computerFont";
  font-weight: lighter;
  text-align: center;
}

@media (max-width: 950px) {
  .logo {
    position: fixed;
    top: 0;
    margin-top: 16px;
  }

  nav ul {
    max-height: 0px;
    background: #000;
  }

  nav.black ul {
    background: #000;
  }

  .showing {
    max-height: 34em;
  }

  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 24px;
    text-align: center;
  }

  .menu-icon {
    display: block;
  }
}

2 个答案:

答案 0 :(得分：2)

您的代码有一些问题。首先，您要在link标签和script标签中导入Bootstrap3，但是要使用Bootstrap4语法。这导致您的CSS很少能真正正确呈现。

已知

Bootstrap3出现 margin-collapsing 问题，您可以在MDN或CSS-Tricks上找到更多内容。在大多数情况下，Bootstrap4解决了大多数此类问题。我已将您的依赖关系更改为Bootstrap4依赖关系，并添加了一个橙色div，向您展示了它的外观，而没有塌陷的边缘。

.jumbotron {
  color: #fff;
  height: 500px;
}

html {
  background-image: url("../assets/images/BBLogo.png");
}

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

#front-page-links {
  margin: auto;
  width: 50%;
  padding: 10px;
}

.logo {
  width: 100%;
  height: 100vh;
  background: url(../assets/images/BBLogo.png) no-repeat 50% 50%;
  background-size: cover;
}


/* Navbar */

@font-face {
  font-family: circuitBored;
  src: url(../assets/fonts/CircuitBoredNF.ttf);
}

@font-face {
  font-family: computerFont;
  src: url(../assets/fonts/jura.demibold.ttf);
}

.navbar.navbar-inverse {
  margin-bottom: 0;
}

nav {
  position: fixed;
  width: 100%;
  line-height: 20px;
  margin-bottom: 0;
}

nav ul {
  line-height: 60px;
  list-style: none;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
  color: #fff;
  font-family: computerFont !important;
  font-size: 16px;
  font-weight: bold;
  padding: 0;
  text-align: right;
  margin: 0;
  padding-right: 40px;
  transition: 1s;
}

nav.black ul {
  background: #000;
  font-family: computerFont !important;
  font-size: 16px;
  font-weight: bold;
}

nav ul li {
  display: inline-block;
  font-family: computerFont;
  font-size: 16px;
  font-weight: bold;
  padding: 16px 40px;
}

nav ul li a {
  text-decoration: none;
  font-family: computerFont;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.menu-icon {
  line-height: 60px;
  width: 100%;
  background: #000;
  text-align: right;
  box-sizing: border-box;
  font-family: computerFont;
  padding: 15px 24px;
  cursor: pointer;
  color: #fff;
  display: none;
}

.menu {
  font-family: computerFont;
  font-size: 16px;
  font-weight: bold;
}

.menu ul li a:hover {
  background-color: #35701c;
}

.menu li ul {
  display: none;
  position: absolute;
}

.menu li:hover ul {
  display: grid;
  top: 55px;
}

.submenuD li {
  position: relative;
  text-align: left;
  z-index: 1;
}

.copyright {
  font-family: "computerFont";
  font-weight: lighter;
  text-align: center;
}

@media (max-width: 950px) {
  .logo {
    position: fixed;
    top: 0;
    margin-top: 16px;
  }
  nav ul {
    max-height: 0px;
    background: #000;
  }
  nav.black ul {
    background: #000;
  }
  .showing {
    max-height: 34em;
  }
  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 24px;
    text-align: center;
  }
  .menu-icon {
    display: block;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Angular Bootstrap Demo</title>
  <base href="/" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="./style.css">
</head>

<body>
  <!-- Nav bar -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

    <div class="collapse navbar-collapse" id="navbarColor02">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" />
        <button class="btn btn-secondary my-2 my-sm-0" type="submit">
            Search
          </button>
      </form>
    </div>
  </nav>
  <div style="background-color: orange; width: 100%; height: 500px;">
  </div>
  <!--  -->
  <!-- Dependencies -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <!--  -->
</body>

</html>

答案 1 :(得分：0)

删除边缘margin-bottom：0px; 

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 0px;
    border: 1px solid transparent;
}
相关问题
最新问题