Bootstrap navbar - 如何解決這個佈局？在導航欄元素

初始（桌面）位置：搜索表單（左），以及用於顯示日期導航欄品牌（右側）Bootstrap navbar - 如何解決這個佈局？在導航欄元素

倒塌我拿到後這樣的：

的問題：

日期應該在與摺疊按鈕
有相同的行應日之前是沒有多餘的空間
應該有摺疊按鈕線下僅有1分離邊界

相反，我想這樣：

可行嗎？

的代碼是：

<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>

來源

2017-10-11 monstro

你需要移動的日期導航欄崩潰之外。我可能會把它放在按鈕元素上面。

<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>

來源

2017-10-12 19:54:10 hjcoder18

Bootstrap navbar - 如何解決這個佈局？在導航欄元素

回答

相關問題