Bootstrap 4 切换页面调整大小时不显示链接

Question

我有这个 bootsrap 导航栏，当我调整 window 的大小时，导航栏会缩小并显示汉堡包，但是当我单击汉堡包时，链接不会显示。

这是代码：

    <div class="fixed-top">
    <nav class="navbar navbar-dark navbar-expand-lg cusSticky" style="background-color: #000000b3;">
        <!-- Navbar content -->
        <div class="container-fluid">
            <a class="navbar-brand" href="{% url 'front:index' %}"><img class="image-responsive"
                                                                        src="{% static 'front/images/logo2.png' %}"
                                                                        alt="404"
                                                                        style="position: relative; max-width: 268px; margin-left:100px;"></a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar"
                    aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbar">
                <ul class="navbar-nav mr-auto mt-2 mt-lg-0"
                    style="display: flex; margin-right: 50; margin-left:500px; text: white;">
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'front:index' %}">Home</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'front:about' %}">About</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link"
                           href="{% url 'front:portfolio' %}">Portfolio</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'front:contact' %}">Contact</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link"
                           href="{% url 'front:calendar' %}">Calendar</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="{% url 'user_area:loading'%}">
                            <i class="fa fa-user" aria-hidden="true"></i>
                            {% if user.is_authenticated %}
                            User Area - {{ user.first_name}}
                            {% else %}
                            Login
                            {% endif %}</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

我觉得我错过了什么，但我想不通。

Answer 1

navbar-nav 主列表中似乎没有任何 dropdown-menu。根据需要复制此下拉列表。

<ul class="navbar-nav">

<!-- Dropdown Start -->

  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button"         
    data-toggle="dropdown" aria-expanded="false">
        MAIN DROPDOWN BUTTON
    </a>
    <ul class="dropdown-menu" aria-labelledby="servicesDropdown">
        <li><a class="dropdown-item" href="#">DROPDOWN ITEM 1</a></li>
        <li><a class="dropdown-item" href="#">DROPDOWN ITEM 2</a></li>          
        <li><a class="dropdown-item" href="#">DROPDOWN ITEM 3</a></li>
        <li><a class="dropdown-item" href="#">DROPDOWN ITEM 4</a></li>
     </ul>
  </li>

<!-- Dropdown End -->

</ul>

Answer 2

而不是 data-bs-toggle 和 data-bs-target 使用 data-toggle 和 data-target。我用切换器解决了你的问题，剩下的由你决定......继续努力你的代码！它还有很多不足之处...... ;-) 祝你好运！

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

  <title>Bootstrap 4.6 Navbar with toggler</title>
</head>

<body>
  <div class="fixed-top">
    <nav class="navbar navbar-dark navbar-expand-lg cusSticky" style="background-color: #000000b3;">
      <!-- Navbar content -->
      <div class="container-fluid">
        <a class="navbar-brand" href="{% url 'front:index' %}"><img class="image-responsive" src="{% static 'front/images/logo2.png' %}" alt="404" style="position: relative; max-width: 268px; margin-left:100px;"></a>

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


        <div class="collapse navbar-collapse" id="navbar">
          <ul class="navbar-nav mr-auto mt-2 mt-lg-0" style="display: flex; margin-right: 50; margin-left:500px; text: white;">
            <li class="nav-item active">
              <a class="nav-link" href="{% url 'front:index' %}">Home</a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="{% url 'front:about' %}">About</a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="{% url 'front:portfolio' %}">Portfolio</a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="{% url 'front:contact' %}">Contact</a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="{% url 'front:calendar' %}">Calendar</a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="{% url 'user_area:loading'%}">
                <i class="fa fa-user" aria-hidden="true"></i> {% if user.is_authenticated %} User Area - {{ user.first_name}} {% else %} Login {% endif %}</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>

  <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

</body>

</html>

Bootstrap 4 切换页面调整大小时不显示链接

Bootstrap4 togger not showing links when page resizes

html

bootstrap-4