Bootstrap navbar - Wie man dieses Layout repariert?

Question

Initial (Desktop) Position der Elemente in navbar: das Suchformular (links) und die navbar-Marke verwendet, um das Datum anzuzeigen (rechts)

Nach kollabierte ich dies:

die Probleme:

• Das Datum auf der gleichen Linie mit dem Zusammenbruch Taste
• Es sollte sollte vor dem Zeitpunkt keinen zusätzlichen Platz seine
• Es sollte

Statt nur 1 Trennung Grenze unter der Zusammenbruch Taste Linie sein, ich will diese bekommen:

Ist es machbar?

Der Code ist:

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" 
       aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <span class="navbar-brand navbar-right"> 
       {{vm.currentDate.date}} 
       <span style="color: tomato">{{vm.currentDate.time}}</span> 
      </span> 
      <form class="navbar-form navbar-left" role="search" method="get" target="_blank" action="https://www.google.com/search?"> 
       <div class="form-group"> 
        <input type="text" name="q" ng-model="vm.selected" uib-typeahead="suggestion for suggestion in vm.getSuggestions($viewValue)" 
         size="40" class="form-control gsfi" placeholder="Search..." autocomplete="off" x-webkit-speech autofocus> 
       </div> 
       <button class="btn btn-success" type="submit">Search</button> 
      </form> 
     </div> 
    </div> 
</nav> 

Answer 1

Sie müssen das Datum außerhalb des navbar-Kollaps bewegen. Ich würde es vielleicht über das Button-Element stellen.

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <span class="navbar-brand navbar-right"> 
       {{vm.currentDate.date}} 
       <span style="color: tomato">{{vm.currentDate.time}}</span> 
      </span> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" 
       aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <form class="navbar-form navbar-left" role="search" method="get" target="_blank" action="https://www.google.com/search?"> 
       <div class="form-group"> 
        <input type="text" name="q" ng-model="vm.selected" uib-typeahead="suggestion for suggestion in vm.getSuggestions($viewValue)" 
         size="40" class="form-control gsfi" placeholder="Search..." autocomplete="off" x-webkit-speech autofocus> 
       </div> 
       <button class="btn btn-success" type="submit">Search</button> 
      </form> 
     </div> 
    </div> 
</nav>