gpt4 book ai didi

css - 引导导航切换

转载 作者:太空宇宙 更新时间:2023-11-04 10:00:45 26 4
gpt4 key购买 nike

我有一个网页,它有一个标准的 Bootstrap 标题(带有 Logo 和下拉部分)和一个用于导航的侧边栏。当屏幕尺寸较小时,我试图让侧边栏折叠起来。为此,我制作了一个切换按钮,可以很好地折叠菜单。但问题是,似乎即使关闭可折叠菜单,一些内容仍然显示在所有内容之上。这是一个屏幕截图,向您展示我的意思。 enter image description here

紫色框表示即使菜单关闭,其内容也会以某种方式显示在其他元素之上。有解决办法吗?这是代码:

    <nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a href="#side" class="btn btn-default btn-primary pull-left navbar-toggle" data-toggle="collapse"><span class="caret"></span></a>
<a class="navbar-brand pull-right" href="#">Company Logo</a>
</div>
<ul id="side" class="nav navbar-nav collapse visible-xs">
<li><a href="#">Home</a></li>
<li><a href="stuff.html">Stuff</a></li>
<li><a href="list.html">List Example</a></li>
<li><a href="#">Contacts</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">User <span class="caret"> </span> </a>
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
</nav>

最佳答案

尝试将其添加到导航栏标题

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>

并从那里也删除 visible-xs。

关于css - 引导导航切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38354269/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com