使用移动其他分辨率时,导航栏 link 被隐藏
navbar link is hidden when using mobile other resolution
我正在尝试使用 bootstrap 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 %}
有人可以帮我吗?
那是 bootstrap 移动菜单行为。
如您所见,您的导航栏有 class navbar-collapse
、<div class="collapse navbar-collapse flex-row-reverse" id="navbarColor01">
。
对于较小的设备尺寸,它会折叠导航栏的内容。
如果您的 window/device 尺寸足够小,导航栏会折叠并且按钮可见,或者不可见(在您的情况下)。 icon/color 不见了。
但是如果你按下空白 space,你的菜单就会出现。
<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>
或者更改更多样式并使用 button/collapsing 行为。
我正在尝试使用 bootstrap 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 %}
有人可以帮我吗?
那是 bootstrap 移动菜单行为。
如您所见,您的导航栏有 class navbar-collapse
、<div class="collapse navbar-collapse flex-row-reverse" id="navbarColor01">
。
对于较小的设备尺寸,它会折叠导航栏的内容。
如果您的 window/device 尺寸足够小,导航栏会折叠并且按钮可见,或者不可见(在您的情况下)。 icon/color 不见了。 但是如果你按下空白 space,你的菜单就会出现。
<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>
或者更改更多样式并使用 button/collapsing 行为。