Question

我想为平板电脑和手机的较小屏幕尺寸添加一个引导折叠导航栏。由于某些原因，导航栏通常即使在笔记本电脑的常规屏幕尺寸下也会崩溃。同样，当我按下按钮时，链接显示在导航栏下方，而不是导航栏内部。不理解这个问题，因为我之前在另一个项目上使用了相同的bootstrap崩溃代码，并且没有任何问题。如果可以的话请帮助，谢谢。

body {
  margin: 0;
  padding: 0;
  background: url(../Images/td.jpg) center/cover fixed no-repeat;
  opacity: 5;
}

/* Navbar */
.navbar {
  background: #0c0452;
  padding: 20px 20px;
  width: 100%;
  height: 80px;
}

.logo {
  height: 50px;
  margin: 5px 10px;
}

.links {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.links li {
  display: inline;
}

.links li a {
  padding: 40px;
  color: gold;
  font-family: "Calistoga", cursive;
}
/* End of Navbar */

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <link rel="stylesheet" href="css/style.css" />
    <title>Lavonte Hights</title>
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css?family=Calistoga&display=swap"
      rel="stylesheet"
    />
    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <!-- Latest compiled and minified CSS Bootstrap -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <!--Navbar-->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <img src="Images/sheplogo2.jpg" alt="" class="logo" />
        <div class="navbar-header">
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#myNavbar"
          >
            <div class="toggler-btn">
              <div class="bar bar1"></div>
              <div class="bar bar2"></div>
              <div class="bar bar3"></div>
            </div>
          </button>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="links navbar-nav mx-auto">
            <li class="nav-item"><a href="#home">Home</a></li>
            <li class="nav-item"><a href="#bio">Bio</a></li>
            <li class="nav-item">
              <a href="#awards">Career Stats/Awards & Accolades</a>
            </li>
            <li class="nav-item"><a href="#film">Film</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <!--End of Navbar-->
  </body>
</html>

Answer 1

15.9.17

body {
  margin: 0;
  padding: 0;
  background: url(../Images/td.jpg) center/cover fixed no-repeat;
  opacity: 5;
}


/* Navbar */

.navbar {
  background: #0c0452;
  padding: 20px 20px;
  width: 100%;
}

.logo {
  height: 50px;
  margin: 5px 10px;
}

.links {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.links li {
  display: inline;
}

.links li a {
  padding: 0 40px;
  color: gold;
  font-family: "Calistoga", cursive;
}

.navbar-toggler {
  color: #ffffff;
}

@media screen and (max-width:768px) {
  .links li a {
    padding: 0 0 5px;
    color: gold;
    font-family: "Calistoga", cursive;
  }
}


/* End of Navbar */

Bootstrap 4折叠导航栏无法正常工作

1 个答案: