Question

我有一个导航栏，左边是项目，右边是几个图标（.navbar-right）。看起来在广泛的screem上找到了但是当折叠时每个图标在展开的菜单中占了一排，我想在小屏幕上的展开菜单中的同一行显示三个图标，我的例子是{{3 }}

<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

Bootstrap Navbar，折叠菜单的一行上有多个图标

1 个答案: