在Bootstrap中折叠导航栏上更改菜单顺序3 [英] Changing Menu Order on Collapsed Navbar in Bootstrap 3

问题描述

我有一个Bootstrap 3 Navbar，它有两个右对齐的< ul> 部分，它给了我：

当菜单是崩溃的移动，我得到这个：

我有两个与折叠菜单相关的问题。 1）如何让按钮出现在折叠菜单的底部而不是顶部？ 2）如何更改折叠菜单中按钮的样式（不影响水平菜单中的样式）？

以下是此导航栏的标记。是的，我有两个单独的< ul> 部分的原因：

 < div class =navbar navbar-default navbar-fixed-top> 
< div class =container> 
< div class =navbar-header> 
< button class =navbar-toggledata-toggle =collapsedata-target =。navHeaderCollapse> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< a href =＃class =navbar-brand>我的网站< / a> 
< / div> 
< div class =collapse navbar-collapse navHeaderCollapse> 
< ul class =nav navbar-nav navbar-right> 
< li>< a href =＃class =btn navbar-btnid =Btn_1> Button One< / a>< / li> 
< li>< a href =＃class =btn navbar-btnid =Btn_2>按钮二< / 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> 
  

解决方案

我最终找到了一个更简单的重新格式化解决方案，

 < div class =""折叠navbar-collapse navHeaderCollapse> 
< ul class =nav navbar-nav navbar-right hidden-xs> 
< li>< a href =＃class =btn navbar-btnid =Btn_1> Button One< / a>< / li> 
< li>< a href =＃class =btn navbar-btnid =Btn_2>按钮二< / 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 =＃>按钮一< / a>< / li> 
< li>< a href =＃>按钮2< / a>< / li> 
< / ul> 
< / div> 
  

我简单地复制了Button One和Button Two < ul> code>部分并将其添加到底部。然后我删除了< a> 链接上的类和ID，这样就不会发生按钮格式化。最后，我将 hidden-xs bootstrap类添加到顶部< ul> 和 visible-xs 到底部< ul> 类。这样做的窍门：





I have a Bootstrap 3 Navbar that has two right-justified <ul> sections which gives me this:

When the menu is collapse for mobile, I get this:

I have two questions related to the collapsed menu. 1) How can I get the buttons to appear at the bottom of the collapsed menu instead of the top? 2) How can I change the styling of the buttons in the collapsed menu (without affecting the style in the horizontal menu)?

Below is the markup for this Navbar. And yes I have a reason for having two separate <ul> sections:

<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>

解决方案

I ended up finding a simpler solution for the reformatting and reordering of the button links on the collapsed navbar, one that doesn't require new javascript code:

        <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>

I simply duplicated the Button One and Button Two <ul> section and added it to the bottom. I then removed the classes and ID on the <a> links so that no button formatting would occur. Finally, I added the hidden-xs bootstrap class to the top <ul> and visible-xs to the bottom <ul> class. That did the trick:

这篇关于在Bootstrap中折叠导航栏上更改菜单顺序3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！