所以下面的代码是Django的,所以链接的块,他们工作正常,只是当屏幕太小的时候下拉导航不会下拉,如果我让它下拉,让屏幕变小,那么我就不能让它不下拉。非常烦人,因为我已经得到了一个网站看起来很不错,但它这样做了。
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" id="logo" href="/">Company</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav" aria-label="Expand Navigation">
<div class="navbar-toggler-icon"></div>
</button>
<div class="collapse navbar-collapse" id="nav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link {% block home %}{% endblock%}" href="{% url 'index' %}">Home </a></li>
<li class="nav-item"><a class="nav-link {% block pricing %}{% endblock%}" href="{% url 'index' %}">Pricing </a></li>
<li class="nav-item"><a class="nav-link {% block how %}{% endblock%}" href="{% url 'index' %}">How it Works </a></li>
<li class="nav-item"><a class="nav-link {% block work %}{% endblock%}" href="{% url 'work' %}">Work With Us</a></li>
<li class="nav-item"><a class="nav-link {% block contact %}{% endblock%}" href="{% url 'contact' %}">Contact Us</a></li>
<li class="nav-item"><a class="nav-link" href="/login">Log In</a></li>
</ul>
</div>
</div>
</nav>
2条答案
按热度按时间kkih6yb81#
尝试将
<nav>
标记上的navbar-expand-lg
替换为navbar-expand
类。“lg”是基于响应性的较大设备。
您可以在此查看文档:https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
所以你的代码应该是:
5m1hhzi42#
在按钮上添加aria-expanded=“false”