bootstrap 导航栏打开时更改项目顺序

Question

在平板电脑分辨率（宽屏）上，我希望 "Anmelden" 和 "Registrieren" 按钮出现在最右侧，但在智能手机分辨率下，这两个项目都应位于菜单顶部（见图）

如果没有 javascript，我怎样才能更好地做到这一点？

这是一个 plunker（不是我的），您可以在其中试用：

http://plnkr.co/edit/58wuSb2d6ztwUhbA01Mt?p=preview

在 plunker 中，按钮被称为 "Login" 和 "Register"，与我的屏幕截图不同。

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>

    <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-require="angular.js@1.1.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" data-semver="1.1.5"></script>
    <script data-require="ui-bootstrap@0.5.0" data-semver="0.5.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="app.js"></script>
    <style>
    div.navbar-collapse.collapse {
        display: block;
        overflow: hidden;
        max-height: 0px;
        -webkit-transition: max-height .3s ease;
        -moz-transition: max-height .3s ease;
        -o-transition: max-height .3s ease;
        transition: max-height .3s ease;
    }
    div.navbar-collapse.collapse.in {
        max-height: 2000px;
    }
    </style>
  </head>

  <body ng-controller="MainCtrl">

    <nav class="navbar navbar-default" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">

        <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
          <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="#">Login</a>
         <a class="navbar-brand" href="#">Register</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'">

        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Meine Geräte</a></li>
          <li><a href="#">Service</a></li>
          <li><a href="#">Konfiguration</a></li>
          <li><a href="#">..::TEST::..</a></li>

        </ul>

      </div><!-- /.navbar-collapse -->
    </nav>



  </body>
</html>

Answer 1

你可以在没有 js 的情况下制作这个东西以获得快速订购菜单

  <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
      <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 hidden-sm" href="#">Login</a>
     <a class="navbar-brand hidden-sm" href="#">Register</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'">

    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Meine Geräte</a></li>
      <li><a href="#">Service</a></li>
      <li><a href="#">Konfiguration</a></li>
      <li><a href="#">..::TEST::..</a></li>

    </ul>

  <ul class="nav navbar-nav navbar-right hidden-lg hidden-xs hidden-md">
     <li><a class="" href="#">Login</a></li>
     <li><a class="" href="#">Register</a></li>
  </ul>

  </div><!-- /.navbar-collapse -->

bootstrap 导航栏打开时更改项目顺序

Change order of items when the bootstrap navbar is opened

navbar

twitter-bootstrap

twitter-bootstrap-3