在切换导航菜单中改变导航栏标题列表元素的顺序而不改变顺序

如何简单地更改导航栏标题列表元素的顺序而不改变切换导航菜单中的顺序。 Like this sample image 在切换导航菜单中改变导航栏标题列表元素的顺序而不改变顺序

My Code Is:

<nav class="navbar navbar-inverse"> 
<div class="container-fluid"> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#inverseNavbar1" aria-expanded="false"> 
    <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="#">Brand</a></div> 

<div class="collapse navbar-collapse" id="inverseNavbar1"> 
    <ul class="nav navbar-nav navbar-right"> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 2</a></li> 
    <li><a href="#">Link 3</a></li> 
    <li><a href="#">Link 4</a></li> 
    </ul> 
</div>

来源

2016-04-21 spilet

虽然这可能不是一个很好的解决方案，这是一个重复的问题 - http://stackoverflow.com/questions/23875090/changing-menu-order-on-collapsed-navbar-in-bootstrap- 3。 – Tricky12

是不是真的要重新排序的菜单项的好方法。但是，在您的示例中，当屏幕大于768像素（Bootstrap的移动切换菜单的断点）时，您可以向Link1添加float: right。

Demo Here

<li class="float-right"><a href="#">Link 1</a></li> 

@media(min-width: 768px) { 
    .navbar .navbar-nav .float-right { 
     float: right; 
    } 
}

注意 - 该解决方案是专门针对你的榜样。使用float完全重新排序所有链接将会很困难。

来源

2016-04-21 19:37:41 Tricky12

在切换导航菜单中改变导航栏标题列表元素的顺序而不改变顺序

回答

相关问题