Bootstrap Navbar，一排折叠菜单上有多个图标答案

【问题标题】：Bootstrap Navbar, multiple icons on one row of collapsed menuBootstrap Navbar，一排折叠菜单上有多个图标
【发布时间】：2017-03-08 22:04:47
【问题描述】：

我有一个导航栏，左侧有项目，右侧有几个图标（带有 .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>

在手机上，当您展开菜单时，三个图标中的每一个都占一行，我希望它们位于同一行。每个图标都有不同的链接。

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

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

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

【讨论】：

我希望将其他导航项目（在本例中为主页和问题）保留在单独的行中。