響應式導航欄消失 < 768px

Question

我一直在努力使用引導導航欄，基本上我想做的是一個簡單的響應式導航欄。

我查閱了各種教程，但似乎無法弄清楚我的錯誤。

基本上，當我的屏幕寬度低於 768 像素時，我的導航欄會消失，這是我的導航欄的代碼，也是 css 的代碼。

HTML：

<header>
      <nav class="navbar navbar-expand-lg navbar-expand-md">
        <div class="container">
          <a class="navbar-brand" href="/">
            <img src="{% static 'images/logo2.png' %}" width="40%" />
          </a>
          <div class="navbar-header">
            <button
              type="button"
              class="navbar-toggle"
              data-toggle="collapse"
              data-target="#navbarCollapse"
            >
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          </div>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a href="/" class="nav-link">Acasă</a>
              </li>
              <li class="nav-item">
                <a href="/about/" class="nav-link">Despre</a>
              </li>
              <li class="nav-item">
                <a href="/services/" class="nav-link">Servicii</a>
              </li>
              <li class="nav-item">
                <a href="/products/" class="nav-link">Produse</a>
              </li>
              <li class="nav-item">
                <a href="/quote/" class="nav-link">Calculator</a>
              </li>
              {% if request.user.is_authenticated %}
              <li class="nav-item">
                <a class="nav-link" href="{% url 'profile' %}"
                  >Profilul tau, {{request.user.username}}</a
                >
              </li>
              <li class="nav-item">
                <a
                  href="{% url 'logout' %}"
                  class="nav-link"
                  style="color: #ebce09"
                  >Logout</a
                >
              </li>
              {% else %}
              <li class="nav-item">
                <a
                  href="{% url 'login' %}"
                  class="nav-link"
                  style="color: #ebce09"
                  >Login</a
                >
              </li>
              {% endif %}
            </ul>
          </div>
        </div>
      </nav>
    </header>

CSS：

* {`enter code here`
  box-sizing: border-box !important;
}

html {
  scroll-behavior: smooth;
}

body {
  color: #666666;
  font-size: 14px;
  font-family: "Raleway", sans-serif;
  line-height: 1.80857;
  font-weight: normal;
}
a {
  color: #1f1f1f;
  text-decoration: none !important;
  outline: none !important;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.navbar {
  background-color: #12153c;
}
.nav-link {
  color: white;
  margin-left: 40px;
  font-size: 14px;
  font-weight: bold;
}
.nav-link:hover {
  color: #d0b608;
}

另外，我正在使用 django，所以忽略 {% %} django 輸入

 * { `enter code here` box-sizing: border-box !important; } html { scroll-behavior: smooth; } body { color: #666666; font-size: 14px; font-family: "Raleway", sans-serif; line-height: 1.80857; font-weight: normal; } a { color: #1f1f1f; text-decoration: none !important; outline: none !important; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } *, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .navbar { background-color: #12153c; } .nav-link { color: white; margin-left: 40px; font-size: 14px; font-weight: bold; } .nav-link:hover { color: #d0b608; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <header> <nav class="navbar navbar-expand-lg navbar-expand-md"> <div class="container"> <a class="navbar-brand" href="/"> <img src="{% static 'images/logo2.png' %}" width="40%" /> </a> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item"> <a href="/" class="nav-link">Acasă</a> </li> <li class="nav-item"> <a href="/about/" class="nav-link">Despre</a> </li> <li class="nav-item"> <a href="/services/" class="nav-link">Servicii</a> </li> <li class="nav-item"> <a href="/products/" class="nav-link">Produse</a> </li> <li class="nav-item"> <a href="/quote/" class="nav-link">Calculator</a> </li> {% if request.user.is_authenticated %} <li class="nav-item"> <a class="nav-link" href="{% url 'profile' %}">Profilul tau, {{request.user.username}}</a > </li> <li class="nav-item"> <a href="{% url 'logout' %}" class="nav-link" style="color: #ebce09" >Logout</a > </li> {% else %} <li class="nav-item"> <a href="{% url 'login' %}" class="nav-link" style="color: #ebce09" >Login</a > </li> {% endif %} </ul> </div> </div> </nav> </header>

Answer 1

我將它與引導程序 5 的導航欄文檔進行了交叉引用。不確定您使用的是哪個版本的引導程序，但缺少使其工作的部分是：

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

我為此替換了：

<div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
   </button>
</div>

運行此代碼，您應該會看到一個通常是導航圖標的粉紅色方塊。

 * {`enter code here` box-sizing: border-box !important; } html { scroll-behavior: smooth; } body { color: #666666; font-size: 14px; font-family: "Raleway", sans-serif; line-height: 1.80857; font-weight: normal; } a { color: #1f1f1f; text-decoration: none !important; outline: none !important; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } *, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .navbar { background-color: #12153c; } .nav-link { color: white; margin-left: 40px; font-size: 14px; font-weight: bold; } .nav-link:hover { color: #d0b608; } button.navbar-toggler { background: pink; }

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <header> <nav class="navbar navbar-expand-lg navbar-expand-md"> <div class="container"> <a class="navbar-brand" href="/"> <img src="{% static 'images/logo2.png' %}" width="40%" /> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item"> <a href="/" class="nav-link">Acasă</a> </li> <li class="nav-item"> <a href="/about/" class="nav-link">Despre</a> </li> <li class="nav-item"> <a href="/services/" class="nav-link">Servicii</a> </li> <li class="nav-item"> <a href="/products/" class="nav-link">Produse</a> </li> <li class="nav-item"> <a href="/quote/" class="nav-link">Calculator</a> </li> <!--{% if request.user.is_authenticated %} <li class="nav-item"> <a class="nav-link" href="{% url 'profile' %}" >Profilul tau, {{request.user.username}}</a > </li> <li class="nav-item"> <a href="{% url 'logout' %}" class="nav-link" style="color: #ebce09" >Logout</a > </li> {% else %}--> <li class="nav-item"> <a href="{% url 'login' %}" class="nav-link" style="color: #ebce09" >Login</a > </li> {% endif %} </ul> </div> <!--<div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse" > <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div>--> </div> </nav> </header>