CSS來排隊這個通知圖標

Question

我試圖讓與同一行的下拉菜單的右側和左側的頭部徽章通知圖標。我還希望在右側的操作菜單的左側留下帶有徽章的通知圖標。不知道如何正確工作。

https://jsfiddle.net/DTcHh/33742/

<nav class="navbar navbar-inverse navbar-static-top"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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="/">Reclamation</a> 
     </div> 

     <div style="display: inline-block;"> 
      <button class="btn btn-default btn-lg btn-link" style="font-size:36px;"> 
       <span class="glyphicon glyphicon-comment"></span> 
      </button> 
      <span class="badge badge-notify">3</span> 
     </div> 

     <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Actions <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 

Answer 1

你真的很接近，我剛搬到你的通知圖標下的HTML，然後因爲你使用的引導添加類pull-right它。

見my fiddle。

<nav class="navbar navbar-inverse navbar-static-top"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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="/">Reclamation</a> 
     </div> 

     <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Actions <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
        </ul> 
       </li> 
      </ul> 

     <div class="pull-right" style="display: inline-block;"> 
      <button class="btn btn-default btn-lg btn-link" style="font-size:36px;"> 
       <span class="glyphicon glyphicon-comment"></span> 
      </button> 
      <span class="badge badge-notify">3</span> 
     </div> 

     </div> 
    </div> 
</nav> 

Answer 2

的主要問題是，你有你的.navbar-collapse.collapse類display: block!important。將其更改爲display: inline-block，並且所有內容都位於容器流體的同一行中。我也不會將內聯樣式應用於您的按鈕和徽章的容器div，並從那裏給它一個類和樣式。