在切换导航菜单中更改没有更改顺序的导航栏标题列表元素的顺序

Question

如何在不更改切换导航菜单中的顺序的情况下更改导航栏标题列表元素的顺序。 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>

Answer 1

重新订购菜单项目并不是一个好方法。但是，在您的示例中，当屏幕大于768px时，您可以向Link1添加float: right（移动切换菜单的Bootstrap断点）。

Demo Here

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

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

注意 - 此解决方案特定于您的示例。使用float来完全重新排序所有链接是很困难的。