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

Question

我怎样才能简单地更改导航栏标题列表元素的顺序而不更改切换导航菜单中的顺序。 Like this sample image

我的代码是:

<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

重新排序菜单项并没有真正好的方法。但是，在您的示例中，当屏幕大于 768 像素(Bootstrap 的移动切换菜单断点)时，您可以将 float: right 添加到 Link1。

Demo Here

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

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

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