引導導航欄 - 對齊桌面和移動

我想一些元素始終顯示在導航欄的元素 - 即使在菜單已展開。引導導航欄 - 對齊桌面和移動

我用的是標準的導航欄-BAV類：

<ul class="nav navbar-nav pull-right"> 
    <li> 
     <div id="message" class="pull-right"><i class="fa fa-envelope fa-2x"></i></div> 
    </li> 
    </ul>

https://codepen.io/pepe007/pen/pwmyxZ

的問題：我要顯示在div #message留下來的菜單大和小屏幕上。

來源

2017-07-17 Pepe

喜歡這個？ https://codepen.io/mcoker/pen/NgVrom –

謝謝你，邁克爾！ – Pepe

沒有汗水，不知道這是你想不想的。我會提交作爲答案。 –

您可以重新排列元素，把它們放在柔性行，並使用margin-left: auto上的郵件圖標來推動它和菜單/下拉按鈕在右邊。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://use.fontawesome.com/4db07c8d8d.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body> 
 
    <style> 
 
    #logo { 
 
     width: 250px; 
 
     background: deepskyblue; 
 
    } 
 
    
 
    #popups { 
 
     padding-right: 15px; 
 
    } 
 
    
 
    #user { 
 
     display: inline; 
 
     background: olivedrab; 
 
     padding: 15px; 
 
    } 
 
    
 
    #message { 
 
     display: inline; 
 
     background: lightcoral; 
 
     padding: 15px; 
 
    } 
 
    
 
    .message { 
 
     margin-left: auto; 
 
    } 
 
    
 
    .navbar-header, .navbarContainer { 
 
     display: flex; 
 
     align-items: flex-start; 
 
    } 
 
    
 
    .container > .navbar-header { 
 
     margin-right: 0; 
 
    } 
 
    
 
    .navbar-nav { 
 
     margin: 0 0 0 auto; 
 
    } 
 
    
 
    .fa-envelope { 
 
     font-size: 14px; 
 
    } 
 
    .nb { 
 
    display: flex; 
 
    align-items: flex-end; 
 
    flex-direction: column; 
 
    } 
 
    </style> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="container navbarContainer"> 
 

 
     <div class="navbar-header"> 
 

 

 
     <a class="navbar-brand" href="#" id="logo">Brand</a> 
 
     <ul class="nav pull-left"> 
 
      <li> 
 
      <div id="user" class="pull-left"><i class="fa fa-user"></i> User</div> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <ul class="nav navbar-nav message"> 
 
     <li> 
 
      <div id="message" class="pull-right"><i class="fa fa-envelope fa-2x"></i></div> 
 
     </li> 
 
     </ul> 
 
     <div class="nb"> 
 
     
 
     <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> 
 

 
     <div class="collapse navbar-right navbar-collapse pull-right" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
      <li><a href="#">Menu 0</a></li> 
 
      <li><a href="#">Menu 1</a></li> 
 
      <li><a href="#">Menu 2</a></li> 
 
      <li><a href="#">Menu 3</a></li> 
 
     </ul> 
 
     </div> 
 
     </div> 
 

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

 
    <div class="container"> 
 
    <div class="alert alert-warning">We are but visitors on this rock, hurling through time and space at sixty-six thousand miles an hour.</div> 
 
    </div> 
 

 
</body>

來源

2017-07-17 22:51:38

邁克爾，我剛纔注意到，當點擊（不像原來的引導例子）「展開」按鈕不會消失。此外，＃BS-示例-導航欄塌-1的div應顯示現有的頭下面，而不是它的右側。你能幫我嗎？ – Pepe

@Pepe筆中的響應式佈局看起來不對。郵件圖標落在展開按鈕下方。我不知道你的意思是「點擊時擴展按鈕不會消失」 - 它不會消失在你的筆中？捅了一捅，更新了我的答案。如果這不起作用，你應該發佈一個新問題，這個問題只是爲了讓消息圖標在菜單的左側。 –

你是對的。我的錯。順便說一句：抱歉，我沒有立即回答。感謝名單。 – Pepe

引導導航欄 - 對齊桌面和移動

回答

相關問題