单击时如何阻止自举汉堡包图标和可折叠菜单跳开？

问题描述

我正试图使汉堡菜单像这样按行显示在图标下方，但是单击时菜单和图标在跳动。如何防止这种情况发生？我试过调整以摆脱固定高度，但它没有改变。我希望一切都保持原样，而折叠菜单仅显示在其下方。这是我的代码：

    *,::before,::after {
  Box-sizing: border-Box;
}

:root {
  --blue: #3a2eb6;
  --white: #fff;
  --red: #cd3f33;
}
html{
  font-size: 1em;
}
nav{
  background: var(--white);
}
nav .logo{
  background: url("../images/logo-mobile.jpg") no-repeat 0 0/contain transparent;
  display: block;
  overflow: hidden;
  width: 13.6875rem;
  height: 2.875rem;

}

nav ul li a{
  color: var(--blue);
}

nav ul li{
  margin: 0 0.25rem;
}

nav div.sign-in{
  display: none;
  margin: 0 0.25rem;
}








button.navbar-toggler span i.menu-toggler{
  color: var(--red);

}





@media screen and (min-width: 768px)
{
  nav .logo{
    width: 17.125rem;
    height: 3.5625rem;
  }
  nav ul li.sign-in-mobile a{
    display: none;
  }

  nav div.sign-in{
    background-color: var(--blue);
    padding: 0 1.5rem;
    display: block;
    margin-left: 15rem;
  }

  nav div.sign-in a{
    color: var(--white);
  }

  #bootstrap-override .navbar-nav{
    flex-direction: row;
    justify-content: flex-end;
    border-bottom: .1rem solid var(--red);
  }
}

@media screen and (min-width: 992px)
{
  #bootstrap-override .navbar-expand-lg .navbar-toggler{
        display: none;
      }

      nav .logo{
        width: 24.625rem;
        height: 5.25rem;
      }
      #bootstrap-override .navbar-nav{
        border: none;
        margin-left: 2rem;
      }

      nav div.sign-in{
        order: 1;
        margin: 0 0.25rem;
        white-space: Nowrap;
      }
}
*/

  

<!DOCTYPE html>
<html>
<head>
    <Meta charset="utf-8">
    <Meta content="description: goes here" name="description">
    <Meta content="HTML,CSS,XML,JavaScript" name="keywords">
    <Meta content="Twisted Yogurt" name="author">
    <Meta content="width=device-width,initial-scale=1.0" name="viewport">
    <title>Home</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body id="bootstrap-override">
    <header>
        <nav class="navbar navbar-expand-lg">
            <div class="container justify-content-space-between">
                <a class="navbar-brand" href="index.html">
                <div class="logo"></div></a>
                <div class="sign-in">
                    <a class="nav-link" href="#">Sign In</a>
                </div><button aria-controls="myTogglerNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler d-lg-none" data-target="#myTogglerNav" data-toggle="collapse" type="button"><span><i class="fa fa-bars menu-toggler"></i></span></button>
                <div class="collapse navbar-collapse" id="myTogglerNav">
                    <ul class="nav navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="index.html">Home</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">Menu</a>
                            <ul aria-labelledby="nav-link" class="dropdown-menu">
                                <li>
                                    <a href="#">Froyo</a>
                                </li>
                                <li>
                                    <a href="#">Smoothies</a>
                                </li>
                                <li>
                                    <a href="#">Boba</a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Build</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Community Recipes</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact</a>
                        </li>
                        <li class="nav-item sign-in-mobile">
                            <a class="nav-link" href="#">Sign In</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
    </script> 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js">
    </script>
</body>
</html>

解决方法

您的HTML代码（在<div>内部的<ul>中确实有一些错误）。确保代码有效且缩进得很清楚，以保持其可读性和结构性。

无论如何，请看一下文档：https://getbootstrap.com/docs/4.5/components/navbar/您必须将div#myTogglerNav放在ul.nav.navbar-nav的周围/周围，然后将button.navbar-toggler移到其上方。

bootstrap-4 collapse hamburger-menu html