Question

嗨，我尝试使用自举程序切换菜单，但是如果我按下按钮，它只会切换0.35秒，然后消失，或者最好说它没有显示。同样，如果其切换导航栏品牌按钮与其他菜单点一起切换

<nav class="navbar navbar-expand-md">
			<button class="btn Menu-button navbar-toggler" data-toggle="collapse" data-target="#menupoint">Menu</button>
			<div class="collapse navbar-collapse" id="menupoint">
				<ul class="navbar-nav ml-3">
					<li class="nav-item">
						<a href="/" class="nav-link">Home</a>
					</li>
					<li class="nav-item">
						<a href="/gallery" class="nav-link">artist</a>
					</li>
					<li class="nav-item">
						<a href="/buySell" class="nav-link">buy</a>
					</li>
					<li class="nav-item">
						<a href="/contact" class="nav-link">contact</a>
					</li>
				</ul>
			</div>
			<button class="btn Menu-button navbar-brand">branding</button>
		</nav>

我试图更改按钮的位置，并且我也在Codepen中进行了测试，但是无论如何它还是没有用。我希望我没有犯一个愚蠢的错误。我正在使用Bootstrap 4，但我很安静

Answer 1

尝试这个。

 <nav class="navbar navbar-expand-md">
<button class="btn Menu-button navbar-brand">branding</button>
        <button class="btn Menu-button navbar-toggler" data-toggle="collapse" data-target="#menupoint">Menu</button>
        <div class="collapse navbar-collapse" id="menupoint">
            <ul class="navbar-nav ml-3">
                <li class="nav-item">
                    <a href="/" class="nav-link">Home</a>
                </li>
                <li class="nav-item">
                    <a href="/gallery" class="nav-link">artist</a>
                </li>
                <li class="nav-item">
                    <a href="/buySell" class="nav-link">buy</a>
                </li>
                <li class="nav-item">
                    <a href="/contact" class="nav-link">contact</a>
                </li>
            </ul>
        </div>

    </nav>

我不知道类 Menu-button 在这里做什么，但是您说过，当您按下按钮时，它只切换了0.35s，然后消失了，也许您已经放了一些使用此类或执行某种jquery动作的一种动画。最好检查一下。还有一件事，如果您使用的是Bootstrap，请按其方式使用它。我的意思是，如果您想要一个具有切换效果的导航栏，则可以这样设置。

    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>    
    </ul>
  </div>  
</nav>

或者您可以点击以下链接： https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp

Bootstrap导航栏不会切换，品牌移动也不会

1 个答案: