Question

当我调整浏览器屏幕的大小时，导航栏元素被替换为切换按钮图标，正如预期的那样，但是当我单击所说的切换按钮时，它无法显示任何折叠的导航栏项目。

<nav class="navbar sticky-top navbar-expand-md navbar-dark bg-dark" id="NSNavbar">
        <div class="container d-flex flex-column flex-md-row justify-content-md-centre">
            <!-- Brand -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <img src="Images\NOSOLO_FT_Logo.png" alt="Logo" style="width:40px;">
                </a>
            </div>

            <!-- Toggler/collapsibe Button -->          
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Navbar links -->
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav mr-auto" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link d-none d-md-inline-block" href="#who-we-are">Who We Are<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link d-none d-md-inline-block" href="#meet-our-team">Meet Our Team</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link d-none d-md-inline-block" href="#what-we-offer">What We Offer</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link d-none d-md-inline-block" href="#who-we-work-with">Who We Work With</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link d-none d-md-inline-block" href="#youtube">NoSolo on Youtube</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link  d-none d-md-inline-block" href="#clients">Our Clients</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link d-none d-md-inline-block" href="#contact">Contact Us</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

Answer 1

您已设置为在中等屏幕上切换（通过添加navbar-expand-md此类）并在中等屏幕上进行display none（通过将d-none d-md-inline-block此类添加到导航栏），因此折叠菜单不需要t显示。

为此，您需要从导航链接中删除d-none d-md-inline-block。

解决方案摘要如下

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<nav class="navbar sticky-top navbar-expand-md navbar-dark bg-dark" id="NSNavbar">
  <div class="container d-flex flex-column flex-md-row justify-content-md-centre">
    <!-- Brand -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="Images\NOSOLO_FT_Logo.png" alt="Logo" style="width:40px;">
      </a>
    </div>

    <!-- Toggler/collapsibe Button -->          
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Navbar links -->
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#who-we-are">Who We Are<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#meet-our-team">Meet Our Team</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#what-we-offer">What We Offer</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#who-we-work-with">Who We Work With</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#youtube">NoSolo on Youtube</a>
        </li>
        <li class="nav-item">
          <a class="nav-link " href="#clients">Our Clients</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact">Contact Us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

Bootstrap Navbar切换按钮未显示内容

1 个答案: