Question

当我缩小浏览器的尺寸时，Bootstrap中可折叠的导航栏不可见。

这是我的代码： index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Webpage</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap" 
      rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Lora&display=swap" rel="stylesheet">
</head>
<body>
<header>
    <nav id="header-nav" class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header"> <!--wrapper class-->
                <a href="index.html" class="float-left d-none d-md-block">
                    <div id="logo-img" alt="Logo image"></div>
                </a>
                <div class="navbar-brand">
                    <a href="index.html"><h1>Website Name</h1></a>
                    <p>
                        <img src="https://img.icons8.com/cotton/64/000000/star.png" alt="Kosher 
                          Certification">
                          <span>Certified</span>
                    </p>
                </div>
                <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data- 
                     target="#collapsable-nav" aria-expanded="false">
                     <span class="sr-only">Toggle navigation</span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                </button>
            </div>
       </div>
</nav>


</header>
     <!-- jQuery (Bootstrap JS plugins depend on it) -->
     <script src="js/jquery-3.5.1.min.js"></script>
     <script src="js/bootstrap.min.js"></script>
     <script src="js/script.js"></script>
 </body>
</html>

styles.css

 body{
    font-size: 16px;
    color: #fff;
    background-color:#61122f;
    font-family: 'Oxygen', sans-serif;
}

#header-nav{
    background-color: #f6b319;
    border-radius: 0;
    border: 0;
}

#logo-img{
    background:url("rest.png") no-repeat;
    width: 175px;
    height: 175px;
    margin:10px;

}

.navbar-brand{
    padding-top: 25px;
}

.navbar-brand h1{
    font-family: 'Lora', serif;
    color: #557c3e;
    font-size: 1.5em;
    text-transform: uppercase;
    font-weight: bold;
    text-shadow: 1px 1px 1px #222;
    margin-top: 0;
    margin-bottom: 0;
    line-height: .75
}
.navbar-brand a:hover, .navbar-brand a:focus {
    text-decoration: none;
}
.navbar-brand p{ 
    color: #000;
    text-transform: uppercase;
    font-size: .7em;
    margin-top: 15px;
}

在浏览器上的输出，当我减小页面大小时，也会出现相同的输出： This is my output on the browser

出现小按钮之类的东西。但不是可折叠的导航栏。

有什么问题吗？

Answer 1

这是一开始的事情，并按照您想要的方式进行更改。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">
<style>
header, .navbar { background: pink; }
#logo-img { width: 20vw; height: 20vw; border: 1px solid orange; }
.navbar-brand h1 span:first-child { font-size: 1.25rem; }
</style>
<title>My Webpage</title>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-expand-md navbar-light">
  <div class="container">
    <a href="index.html" class="d-none d-md-inline-block mr-4">
      <div id="logo-img" alt="Logo">
      </div>
    </a>
    <div class="navbar-brand">
      <a href="index.html">
      <h1 class="mb-3"><span class="d-md-none">Website Name</span>
      <span class="d-none d-md-block">Website Name</span></h1>
      </a>
    </div>
    <p class="d-none d-md-inline-block">
      <img src="https://img.icons8.com/cotton/64/000000/star.png" alt="">
      <span>Certified</span>
    </p>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsable-nav"
      aria-controls="nav1" aria-expanded="false" aria-label="Menu openen en sluiten">
      <span class="sr-only">Toggle menu</span>
      <span class="navbar-toggler-icon"></span>
    </button>
    <div id="collapsable-nav" class="collapse navbar-collapse">
      <ul class="navbar-nav mx-auto">
        <li>Item</li>
      </ul>
    </div>
  </div>
</nav>
</header>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>

导航栏切换/可折叠导航栏不起作用

1 个答案: