gpt4 book ai didi

html - 我需要知道如何更新 bootstrap 汉堡菜单中的 UI

转载 作者:行者123 更新时间:2023-11-28 16:05:52 24 4
gpt4 key购买 nike

我在寻找将汉堡包下拉列表从向下滑动更改为向右滑动并使用相同元素的方法时遇到问题。我已经看到示例,他们在断点处将一个菜单换成另一个菜单,但我只想使用一个菜单来实现这两个菜单。我这里有基本代码。

<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

</button> <a class="navbar-brand" href="#">Bootstrap theme</a>

</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a>

</li>
<li><a href="#about">About</a>

</li>
<li><a href="#contact">Contact</a>

</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>

<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a>

</li>
<li><a href="#">Another action</a>

</li>
<li><a href="#">Something else here</a>

</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a>

</li>
<li><a href="#">One more separated link</a>

</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>

我正在到处寻找解决方案。我不能交换菜单的原因是因为菜单项必须定期更新,我不想在两个空间中进行。

https://fiddle.jshell.net/qw93eLy6/2/

最佳答案

我在我的本地检查它工作正常请检查它,你应该包括这个头文件。如果您有 jquery、css 文件,则包含该文件

 <head>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
</head>


<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">Bootstrap theme <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a>

</li>
<li><a href="#about">About</a>

</li>
<li><a href="#contact">Contact</a>

</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>

<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a>

</li>
<li><a href="#">Another action</a>

</li>
<li><a href="#">Something else here</a>

</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a>

</li>
<li><a href="#">One more separated link</a>

</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>

关于html - 我需要知道如何更新 bootstrap 汉堡菜单中的 UI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39271265/

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