我正在尝试使用引导程序4设置导航栏。
当我在PC上时可以使用。但是,当我更改分辨率以将其置于移动或平板电脑视图中时,链接不再可见,我不明白为什么
和下一个:
我不明白怎么了..这是我的代码:
{% block stylesheets %}
<style>
html, body{
padding-top: 30px;
}
.navbar {
overflow: auto;
background-color: yellow;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
</style>
{% endblock %}
{% block navbar %}
<nav class="navbar navbar-expand-lg navbar-bg">
<div class="sidebar-content">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-row-reverse" id="navbarColor01">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Connexion</a>
</li>
</ul>
</div>
</div>
</nav>
{% endblock %}
有人可以帮我吗?
即引导程序移动菜单行为。如您所见,导航栏具有navbar-collapse
,<div class="collapse navbar-collapse flex-row-reverse" id="navbarColor01">
类。对于较小的设备尺寸,它将折叠导航栏的内容。
如果您的窗口/设备尺寸足够小,则导航栏会折叠,并且按钮是否可见(在您的情况下)。图标/颜色丢失。但是,如果您按空白区域,则会显示菜单。
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
一种可能的解决方案是,删除按钮和折叠行为,如下所示:
<nav class="navbar navbar-expand-lg navbar-bg">
<div class="sidebar-content">
<div class="flex-row-reverse" id="navbarColor01">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Connexion</a>
</li>
</ul>
</div>
</div>
</nav>
或更改其他样式并使用按钮/折叠行为。