Bootstrap 4-响应式导航栏不会折叠

时间：2019-05-07 00:27:02

标签： javascript html css twitter-bootstrap responsive-design

在移动设备上，可折叠导航栏处于打开状态，即使单击“汉堡包”按钮，导航栏也不会折叠。在查看了多个示例并进行了研究之后，我找不到我所忘记的东西。我在导航栏链接div中添加了“折叠”和“导航栏折叠”类。

	<nav class="navbar navbar-dark navbar-expand-md fixed-top" style="background-color: #9D0B0F;"> <!-- Navbar -->
	<div class="container"> <!-- Container (navbar content) -->
		<div class="navbar-brand"><a href="index.php"><img src="images/full_logo_white.png" alt="CeTSC Logo" style="height:40px;"/></a></div> <!-- CeTSC logo -->
	
		<!-- Hamburger button, only visible when open on mobile device -->
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myToggleNav" aria-controls="myToggleNav" aria-expanded="false" aria-label="Toggle Navigation"><span class="navbar-toggler-icon"></span></button>
	
		<div class="collapse navbar-collapse justify-content-end navbar-nav" id="myToggleNav"> <!-- Navbar links -->
				<div class="dropdown"> <!-- About dropdown -->
					<a class="nav-item nav-link mx-lg-3 dropdown-toggle" data-toggle="dropdown" id="aboutDropdown" href="#">About</a> <!-- Link to about dropdown menu -->

					<div class="dropdown-menu rounded-0" style="border-color: #9D0B0F;"> <!-- About dropdown menu -->
						<a class="dropdown-item" href="#">Who we are</a> <!-- Link to who we are page -->
						<a class="dropdown-item" href="#">Our team</a> <!-- Link to our team page -->
					</div> <!-- About dropdown menu -->
				</div> <!-- About dropdown -->

				<div class="dropdown"> <!-- Shop dropdown -->
					<a class="nav-item nav-link mx-lg-3 dropdown-toggle" data-toggle="dropdown" id="shopDropdown" href="#">Shop</a> <!-- Link to shop dropdown menu -->

					<div class="dropdown-menu rounded-0" style="border-color: #9D0B0F;"> <!-- Shop dropdown menu -->
						<a class="dropdown-item" href="#">Lockers</a> <!-- Link to lockers page -->
						<a class="dropdown-item" href="#">Merch</a> <!-- Link to merch page -->
					</div> <!-- Shop dropdown menu -->
				</div> <!-- Shop dropdown -->

				<a class="nav-item nav-link mx-lg-3" href="#">Sponsorship</a> <!-- Link to sponsorship page -->

				<div class="dropdown"> <!-- Get involved dropdown -->
					<a class="nav-item nav-link mx-lg-3 dropdown-toggle" data-toggle="dropdown" id="getInvolvedDropdown" href="#">Get involved</a> <!-- Link to get involved dropdown menu -->

					<div class="dropdown-menu rounded-0" style="border-color: #9D0B0F;"> <!-- Get involved dropdown menu -->
						<a class="dropdown-item" href="#">Join our team</a> <!-- Link to join our team page -->
						<a class="dropdown-item" href="#">Initiatives</a> <!-- Link to initiatives page -->
						<a class="dropdown-item" href="#">ECP</a> <!-- Link to ECP page -->						
					</div> <!-- Get involved dropdown menu -->
				</div> <!-- Get involved dropdown -->

				<a class="nav-item nav-link mx-lg-3" href="#">Clubs</a> <!-- Link to clubs page -->
				<a class="nav-item nav-link mx-lg-3" href="contact.php">Contact</a> <!-- Link to contact page -->
		</div>  <!-- Navbar links -->
	</div>  <!-- Container (navbar content) -->
</nav> <!-- Navbar -->

1 个答案:

答案 0 :(得分：0)

类navbar-nav与collapse和navbar-collapse的组合不兼容；您必须使用其中一个。

要解决此问题，只需删除内容上的navbar-nav类：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-dark navbar-expand-md fixed-top" style="background-color: #9D0B0F;">
  <!-- Navbar -->
  <div class="container">
    <!-- Container (navbar content) -->
    <div class="navbar-brand">
      <a href="index.php"><img src="images/full_logo_white.png" alt="CeTSC Logo" style="height:40px;" /></a>
    </div>
    <!-- CeTSC logo -->

    <!-- Hamburger button, only visible when open on mobile device -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myToggleNav" aria-controls="myToggleNav" aria-expanded="false" aria-label="Toggle Navigation"><span class="navbar-toggler-icon"></span></button>

    <div class="collapse navbar-collapse justify-content-end" id="myToggleNav">
      <!-- Navbar links -->
      <div class="dropdown">
        <!-- About dropdown -->
        <a class="nav-item nav-link mx-lg-3 dropdown-toggle" data-toggle="dropdown" id="aboutDropdown" href="#">About</a>
        <!-- Link to about dropdown menu -->

        <div class="dropdown-menu rounded-0" style="border-color: #9D0B0F;">
          <!-- About dropdown menu -->
          <a class="dropdown-item" href="#">Who we are</a>
          <!-- Link to who we are page -->
          <a class="dropdown-item" href="#">Our team</a>
          <!-- Link to our team page -->
        </div>
        <!-- About dropdown menu -->
      </div>
      <!-- About dropdown -->

      <div class="dropdown">
        <!-- Shop dropdown -->
        <a class="nav-item nav-link mx-lg-3 dropdown-toggle" data-toggle="dropdown" id="shopDropdown" href="#">Shop</a>
        <!-- Link to shop dropdown menu -->

        <div class="dropdown-menu rounded-0" style="border-color: #9D0B0F;">
          <!-- Shop dropdown menu -->
          <a class="dropdown-item" href="#">Lockers</a>
          <!-- Link to lockers page -->
          <a class="dropdown-item" href="#">Merch</a>
          <!-- Link to merch page -->
        </div>
        <!-- Shop dropdown menu -->
      </div>
      <!-- Shop dropdown -->

      <a class="nav-item nav-link mx-lg-3" href="#">Sponsorship</a>
      <!-- Link to sponsorship page -->

      <div class="dropdown">
        <!-- Get involved dropdown -->
        <a class="nav-item nav-link mx-lg-3 dropdown-toggle" data-toggle="dropdown" id="getInvolvedDropdown" href="#">Get involved</a>
        <!-- Link to get involved dropdown menu -->

        <div class="dropdown-menu rounded-0" style="border-color: #9D0B0F;">
          <!-- Get involved dropdown menu -->
          <a class="dropdown-item" href="#">Join our team</a>
          <!-- Link to join our team page -->
          <a class="dropdown-item" href="#">Initiatives</a>
          <!-- Link to initiatives page -->
          <a class="dropdown-item" href="#">ECP</a>
          <!-- Link to ECP page -->
        </div>
        <!-- Get involved dropdown menu -->
      </div>
      <!-- Get involved dropdown -->

      <a class="nav-item nav-link mx-lg-3" href="#">Clubs</a>
      <!-- Link to clubs page -->
      <a class="nav-item nav-link mx-lg-3" href="contact.php">Contact</a>
      <!-- Link to contact page -->
    </div>
    <!-- Navbar links -->
  </div>
  <!-- Container (navbar content) -->
</nav>
<!-- Navbar -->

相关问题
最新问题