Bootstrap navbar не переключается и бренд движется вместе с ним - PullRequest
Новая
       3

Bootstrap navbar не переключается и бренд движется вместе с ним

0 голосов
/ 26 февраля 2020

Привет. Я пытаюсь переключить меню с помощью bootstrap, но если я нажимаю кнопку, она просто переключается на 0,35 с, а затем исчезает, или, лучше сказать, не отображается. Также, если она переключается, кнопка бренда Navbar переключается с остальной частью меню 

<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, и я тихо новый

1 Ответ

1 голос
/ 26 февраля 2020

Попробуйте это. 

 <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

...