Html 更改引导3中折叠导航栏上的菜单顺序
我有一个Bootstrap 3导航栏,它有两个右对齐的Html 更改引导3中折叠导航栏上的菜单顺序,html,twitter-bootstrap-3,navbar,Html,Twitter Bootstrap 3,Navbar,我有一个Bootstrap 3导航栏,它有两个右对齐的部分,这给了我以下信息: 当手机的菜单被折叠时,我得到以下信息: 我有两个关于折叠菜单的问题。1) 如何使按钮显示在折叠菜单的底部而不是顶部?2) 如何更改折叠菜单中按钮的样式(而不影响水平菜单中的样式) 下面是此导航栏的标记。是的,我有理由拥有两个独立的部分: <div class="navbar navbar-default navbar-fixed-top"> <div class="contain
部分,这给了我以下信息:
当手机的菜单被折叠时,我得到以下信息:
我有两个关于折叠菜单的问题。1) 如何使按钮显示在折叠菜单的底部而不是顶部?2) 如何更改折叠菜单中按钮的样式(而不影响水平菜单中的样式)
下面是此导航栏的标记。是的,我有理由拥有两个独立的
部分:
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">My Site</a>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#" class="btn navbar-btn" id="Btn_1">Button One</a></li>
<li><a href="#" class="btn navbar-btn" id="Btn_2">Button Two</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
</ul>
</div>
</div>
</div>
我最终找到了一个更简单的解决方案,可以对折叠导航栏上的按钮链接重新格式化和排序,而不需要新的javascript代码:
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right hidden-xs">
<li><a href="#" class="btn navbar-btn" id="Btn_1">Button One</a></li>
<li><a href="#" class="btn navbar-btn" id="Btn_2">Button Two</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
</ul>
<ul class="nav navbar-nav visible-xs">
<li><a href="#" >Button One</a></li>
<li><a href="#" >Button Two</a></li>
</ul>
</div>
我只是复制了按钮一和按钮二部分,并将其添加到底部。然后我删除了
链接上的类和ID,这样就不会出现按钮格式。最后,我将隐藏的xs
引导类添加到顶部
中,将可见的xs
添加到底部
类中。这就成功了:
我遇到了类似的问题,但一直在使用Bootstrap 4.4,这可以通过简单的d-none d-block解决方案来解决
-
-
-
-
-
-
-