Bootstrap导航栏，折叠式菜单的一行上的多个图标

Question

我有一个导航栏，其左侧的项目和右侧的一些图标（使用.navbar-right）。看起来很宽的屏幕上找到，但当折叠每个图标在扩展菜单中需要一排，我想有三个图标显示在一个小屏幕上展开的菜单中的同一行，我有什么样的例子是here

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="navbar-header" style="padding-left: 10px"> 
      <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#the-menu"> 
       <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> 
      </button> 
     </div> 

     <div class="collapse navbar-collapse" id="the-menu"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="/index.html">Home</a></li> 
       <li><a href="/issues.html">Issues</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="/index.html"><span class="glyphicon glyphicon-home"></span></a></li> 
       <li> 
        <a href="/index.html"><span class="glyphicon glyphicon-log-in"></span></a></li> 
       <li> 
        <a href="/index.html"><span class="glyphicon glyphicon-log-out"></span></a></li> 
      </ul> 

     </div> 

    </div> 
</nav> 

在展开菜单的电话上，每个三个图标每个都占用一行，我希望它们在同一行上。每个图标都有不同的链接。

Answer 1

您可以添加一些CSS覆盖.nav>li到display: inline-block在小屏幕上..

@media (max-width: 768px) { 
    .nav>li { 
     display: inline-block; 
     padding-right: 0; 
    } 
} 

http://www.bootply.com/9Gi06pDJ9d