时间戳

首页 > 解决方案 > Bootstrap 导航栏不会切换，品牌也会随之移动

twitter-bootstrap - Bootstrap 导航栏不会切换，品牌也会随之移动

问题描述

嗨，我尝试使用引导程序切换菜单，但如果我按下按钮，它只会切换 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中进行了测试，但无论如何它都不起作用。我希望我没有犯愚蠢的错误。我正在使用引导程序 4，我很安静

标签： twitter-bootstrapbootstrap-4

解决方案

试试这个。

 <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>

我不知道菜单按钮类在这里做什么，但是你说当你按下按钮时它只是切换 0.35 秒然后它就消失了，也许你已经通过使用这个类或执行一些动画一种 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

推荐阅读