时间戳

首页 > 解决方案 > Bootstrap 4折叠导航栏无法正常工作

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

问题描述

我想为平板电脑和手机的较小屏幕尺寸添加一个引导折叠导航栏。由于某种原因，即使在常规笔记本电脑屏幕尺寸下，导航栏通常也会崩溃。此外，当我按下按钮时，链接会出现在导航栏下方而不是导航栏内。不明白这个问题，因为我之前在另一个项目中使用过相同的引导崩溃代码并且没有任何问题。可以的话请帮忙，谢谢。

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>

标签： htmlcssbootstrap-4

解决方案

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 */
<!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-expand-md 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">
            <i class="fa fa-bars" aria-hidden="true"></i>
          </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>

推荐阅读