Question

因此，当我单击我的汉堡包图标时，它会更改为关闭图标。此外，我的导航栏会扩展几分之一秒，但它又塌陷了。当我点击关闭按钮后，导航项目在几分之一秒内变得可见时会发生同样的事情。我还为移动设备宽度添加了我的 CSS，但我不知道有什么帮助？

HTML

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <link rel="stylesheet" href="https://fonts.google.com/specimen/Be+Vietnam" )>
  <link rel="stylesheet" href="style.css">

  <title>Frontend Mentor | Manage landing page</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>


  <nav class="navbar navbar-inverse navbar-expand-lg navbar-light">
    <!-- <div class="navbar-header"> -->
    <div class="logo">
      <a class="navbar-brand image-responsive" href="#">
        <img src="images/logo.svg" />
      </a>
    </div>
    <!-- <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarText">
      <img src="images/icon-hamburger.svg" alt="hamburger" class="hamburger" />
      <img src="../manage-landing-page-master/images/icon-close.svg" alt="clse" class="close"/>
    </button> -->
    <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse"
      data-target="#navbarText" aria-controls="navbarsExampleDefault" aria-expanded="false"
      aria-label="Toggle navigation">
      <span class="my-1 mx-2 close"><img src="../manage-landing-page-master/images/icon-close.svg" /></span>
      <span class="navbar-toggler-icon"><img src="../manage-landing-page-master/images/icon-hamburger.svg" /></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav mr-auto text-center">
        <li class="nav-item">
          <a class="nav-link" href="#"></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Product</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Careers</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Community</a>
        </li>
      </ul>
      <button class=" nav-button get-started">Get Started</button>
    </div>
  </nav>

CSS 最大宽度 376 像素

 @media (max-width:376px){

    .navbar{
        position: fixed;
        display:flex;
        position: relative;
        justify-content:space-between;
        padding-top: 2vw;
        box-sizing: border-box;      
        width:100%;
        }
    .navbar-nav{
        display:flex;
        list-style:none; 
    }
    .navbar-toggler>.close {
        display:inline;
    }
    .navbar-toggler.collapsed>.close, .navbar-toggler:not(.collapsed)>.navbar-toggler-icon {
        display:none;
    }
    
    .nav-item{
        width: 2px;
        color: black;
        text-align: center;
        font-family: "Be Vietnam",sans-serif;
        font-weight: 400;
        font-style: bold;
    }
    .nav-link{
        text-align: center;
        display:block;
        color: black;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        text-decoration: none;
        
        
    }
    .navbar-brand{
        display:inline-block;padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;font-size:1.25rem;line-height:inherit;white-space:nowrap;
        color: #f5f5f5;
        margin-left:1rem;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        text-decoration:none;
        max-width: 100%;
        max-height:2px;
    }
 .navbar-toggler{
        border: none;
    }
    body{
        background-image: url("../manage-landing-page-master/images/bg-tablet-pattern.svg");
        background-repeat: space;
     background-position:57vw;
    }
    .w-50{
        width: 50%;
    }
    .container-fluid{
        margin-top: 1vw;
    }
    .row{
        width: 100%;
    }
    .top1{
        padding-bottom: 14vw;
        text-align: center;
        margin: 3.5vw;
    }
   
    .bring{
        font-size: 10vw;
    }
.tablee{
    width: 95vw;
    margin-left: -3.5vw;
}

    .manage{
        width: max-content;
    }
    .get-started{
        align-self: center;
        border-radius: 10vw;
        background-color: rgb(243,96,60);
        border: none;
        color: blanchedalmond;
        /* min-width: 30vw; */
        height: 5.3vh;
        font-size: 3vw;
        /* align-content: flex; */
        display: inline-block;
        padding-inline-start: 7vw;
        padding-inline-end: 7vw;
        /* margin-left:0vw; */
        -webkit-box-shadow: 0 8px 6px -6px rgb(243,96,60);
           -moz-box-shadow: 0 8px 6px -6px rgb(243,96,60);
                box-shadow: 0 8px 6px -6px rgb(243,96,60);
    }

Answer 1

添加：

.navbar-collapse.collapse.in {
    display: block !important;
  }

到你的 CSS。

编辑： @timhc22 有同样的问题，它解决了：

<块引用>

https://stackoverflow.com/a/20249415/9745726

导航栏展开并突然折叠

1 个答案: