Question

我的导航栏未显示在顶部。我已经使用了bootstrap-css文件和自定义scss文件。我要附上屏幕截图。

我还想知道这里显示的div是否重要。

我希望它看起来像this，而我当前的页面看起来像this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./CSS/style.css">
    <title>Aurora Grove</title>
</head>
<body>
<nav class="navbar navbar-expand-md  navbar-dark ">
<a class="navbar-brand" href="#"><h3 class="mb-0">Aurora Grove</h3></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#MainNav" aria-controls="MainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
 <div class="collapse navbar-collapse" id="MainNav">
 <ul class="navbar-nav ml-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="#">About</a></li>     
<li class="nav-item">
<a class="nav-link" href="#">Explore</a>
</li>     
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>     
<li class="nav-item">
<a class="nav-link" href="#">Book</a>
</li>     
</ul>
</div>
</nav>
<section id="showcase" class="d-flex justify-content-center align-items-center">
<div id="overlay"></div>
<div class="container text-center text-white " id="header">
<h3 class="display-5">mordern camping</h3>
<h1 class="display-1">Aurora Grove</h1>
<p class="lead d-none d-md-block">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores?</p>
<button id="book" class="btn btn-primary px-5">Book  Now</button>
</div>
</section>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

scss文件

body{
    background-color: #d460bb;
    font-family: "Raleway",sans-serif;
}
.navbar{
    font-weight: 100;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    .navbar-brand h3{
        font-weight: 100;
    }
    .nav-item{
        font-size: 1.4rem;
    }
    .nav-link:hover{
        transition: border 0.2s;
        border-bottom: 1px solid white;
    }
}
// showcasase
#showcase{
background: url('../images/main.jpeg') bottom center  no-repeat;
min-height: 30rem;
position: relative;
#header{
z-index: 2;
}
#overlay{
    background: rgba($color: #000000, $alpha: 0.2);
    position: absolute;
    top: 0rem;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
h1{
    font-family: "Questrial",sans-serif;
    line-height: 1;

}
#book{
    font-size: 1.5rem;
    border-radius: 2rem;
}
}
// phone 
@media (max-width:768px){
.navbar{
    background: #1f1f1f;
    .nav-link:hover{
border-bottom: none;
    }
}
// showcase 
#showcase{
    min-height: 500px;
    h1{
        font-size: 4rem;
    }
}
}

谢谢。

Answer 1

主要是因为height:100%。

      body {
        font-family: "Raleway", sans-serif;
      }
      .navbar {
        font-weight: 100;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        z-index: 3;
      }
      .navbar-brand h3 {
        font-weight: 100;
      }
      .nav-item {
        font-size: 1.4rem;
      }
      .nav-link:hover {
        transition: border 0.2s;
        border-bottom: 1px solid white;
      }

      #showcase {
        background: url("https://images.unsplash.com/photo-1478827536114-da961b7f86d2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop")
          no-repeat bottom center;
        min-height: 30rem;
        position: relative;
        #header {
          z-index: 2;
        }
        #overlay {
          background: #000000;
          opacity: 0.2;

          position: absolute;
          top: 0rem;
          left: 0;
          right: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
        }
        h1 {
          font-family: "Questrial", sans-serif;
          line-height: 1;
        }
        #book {
          font-size: 1.5rem;
          border-radius: 2rem;
        }
      }
      // phone
      @media (max-width: 768px) {
        .navbar {
          background: #1f1f1f;
          .nav-link:hover {
            border-bottom: none;
          }
        }
        // showcase
        #showcase {
          min-height: 500px;
          h1 {
            font-size: 4rem;
          }
        }
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Template</title>

    <!-- bootstrap 4.4 -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />

  </head>
  <body>
    <nav class="navbar navbar-expand-md  navbar-dark fixed-top">
      <a class="navbar-brand" href="#"><h3 class="mb-0">Aurora Grove</h3></a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#MainNav"
        aria-controls="MainNav"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="MainNav">
        <ul class="navbar-nav ml-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="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Explore</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Book</a>
          </li>
        </ul>
      </div>
    </nav>
    <section
      id="showcase"
      class="d-flex justify-content-center align-items-center"
    >
      <div id="overlay"></div>
      <div class="container text-center text-white " id="header">
        <h3 class="display-5">mordern camping</h3>
        <h1 class="display-1">Aurora Grove</h1>
        <p class="lead d-none d-md-block">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores?
        </p>
        <button id="book" class="btn btn-primary px-5">Book Now</button>
      </div>
    </section>

    <!-- Bootstrap js ,popper js and jquery  -->
    <script
      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
      crossorigin="anonymous"
    ></script>

    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

作为后续问题的一部分另外，我想知道这里显示的div是否重要？

是否要在特定区域上添加overlay效果取决于您。通常，添加它是为了使部分内容与用户更接近（更具吸引力/更具针对性）

Answer 2

您在height:100%的样式中提到了.navbar。我将其更改为height:15vh;，它似乎工作正常。随时使用该值，直到找到合适的值为止。

为什么导航栏不在顶部？

2 个答案: