导航浮动右侧部分

Question

我有一个疑问，以及是否可以通过CSS实现以下目标：

查看1（大屏幕）：

查看2（中型屏幕）： 第二个问题：如何将导航元素放置在第二行后居中？

查看3（移动设备）：

我的问题是，如果没有足够的空间（中型屏幕，视图2），导航的右侧部分（行，书签，...，登录名）应与徽标位于同一行。 。但是，如果激活了移动导航（视图3），则我想成为“搜索”，“目录”，“分类” ...的链接。

如果导航元素可以位于（视图2）的中心，那也很好。

整个过程都是使用Bootstrap 3构建的。

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

nav#header img.favicon-logo {
    padding-top: 5px;
    height: 46px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" id="header">
   <div class="container-fluid">
      <!-- Titel und Schalter werden für eine bessere mobile Ansicht zusammengefasst -->
      <div class="navbar-header">
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
         <span class="sr-only">Navigation ein-/ausblenden</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
         <a href="/">
         <img src="https://www.lotsearch.de/images/favicons/favicon_144x144.png" class="favicon-logo">
         </a>
      </div>
      <!-- Alle Navigationslinks, Formulare und anderer Inhalt werden hier zusammengefasst und können dann ein- und ausgeblendet werden -->
      <div class="navbar-collapse collapse" id="main-menu" aria-expanded="false" style="height: 1px;">
         <div class="navbar-inner">
            <ul class="nav navbar-nav">
               <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                  <i class="fa fa-fw fa-search"></i>
                  Suche <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                     <li><a href="/"><i class="fa fa-lightbulb-o fa-fw"></i> Suche (Aktuelle Auktionen)</a></li>
                     <li><a href="/archive"><i class="fa fa-archive fa-fw"></i> Suche (Archiv)</a></li>
                  </ul>
               </li>
               <li>
                  <a href="/auction-catalogs">
                  <i class="fa fa-book fa-fw"></i>
                  Kataloge                            </a>
               </li>
               <li>
                  <a href="/category"><i class="fa fa-list-alt fa-fw"></i> Kategorien                            </a>
               </li>
               <li>
                  <a href="/alert"><i class="fa fa-bell fa-fw"></i> Suchaufträge                            </a>
               </li>
               <li>
                  <a href="/artist"><i class="fa fa-bar-chart fa-fw"></i> Künstler / Analysen                            </a>
               </li>
               <li>
                  <a href="/blog"><i class="fa fa-newspaper-o fa-fw"></i> Blog                            </a>
               </li>
               <li>
                  <a href="/top-lots"><i class="fa fa-star fa-fw"></i> Top-Seiten                            </a>
               </li>
               <li>
                  <a href="/user/registration/select-product" class="orange"><i class="fa fa-pencil-square-o fa-fw"></i> Registrieren                                </a>
               </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
               <li>
                  <a href="/bids/management/bidlist" title="Vorgemerkte Gebote auf Ihrer Bietliste">
                     <div class="icon-wrapper hidden-xs">
                        <i class="fa fa-gavel fa-fw"></i>
                        <span class="badge badge-orange" id="bidlist-counter">0</span>
                     </div>
                     <div class="visible-xs">
                        <i class="fa fa-gavel fa-fw"></i> Gebote (Bietliste)                                
                     </div>
                  </a>
               </li>
               <li>
                  <a href="/favorites" title="Merkzettel">
                     <div class="icon-wrapper hidden-xs">
                        <i class="fa fa-bookmark fa-fw"></i>
                        <span class="badge badge-orange" id="bookmark-counter">0</span>
                     </div>
                     <div class="visible-xs">
                        <i class="fa fa-bookmark fa-fw"></i> Merkzettel                                
                     </div>
                  </a>
               </li>
               <li class="dropdown">
                  <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                  <span class="flag-icon flag-icon-de"></span>
                  <span class=" fa fa-angle-down"></span>
                  </a>
                  <ul class="dropdown-menu dropdown-langauge">
                     <li><a href="/en/auction-catalogs?locale=en_GB" hreflang="en"><span class="flag-icon flag-icon-gb"></span> GB            </a></li>
                  </ul>
               </li>
               <li class="dropdown">
                  <a href="/user/login" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user fa-fw"></i> Login <span class="caret"></span></a>
                  <ul class="dropdown-menu dropdown-lr animated fadeIn" role="menu">
                     <li>
                        <div class="col-lg-12">
                           <h4>Login</h4>
                           <form method="post" name="loginform" action="/user/login" id="loginform">
                              <div class="form-group "><label>Email</label><input name="identity" type="text" tabindex="1" class="form-control" value=""></div>
                              <div class="form-group ">
                                 <label for="credential">Passwort</label>                <span class="pull-right"><a href="/user/password/request">Passwort vergessen?</a></span>
                                 <input type="password" name="credential" tabindex="2" class="form-control" value="">            
                              </div>
                              <div class="form-group "><button type="submit" name="submit" class="form-control btn-orange btn btn-default" tabindex="3" value=""><span class="fa fa-sign-in"></span> Einloggen</button></div>
                           </form>
                           <div class="text-center pt-5px">
                              <p class="pb-5px">- ODER -</p>
                              <a class="btn btn-default" href="/user/registration/select-product">
                              <i class="fa fa-pencil-square-o"></i> Registrierung                    </a>
                           </div>
                        </div>
                     </li>
                  </ul>
               </li>
            </ul>
         </div>
      </div>
      <!-- /.navbar-collapse -->
   </div>
   <!-- /.container-fluid -->
</nav>