引导导航栏 - 对齐桌面和移动

我想一些元素始终显示在导航栏的元素 - 即使在菜单已展开。引导导航栏 - 对齐桌面和移动

我用的是标准的导航栏-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

引导导航栏 - 对齐桌面和移动

回答

相关问题