css (引导程序)当视口收缩而不是完全折叠菜单时，是否可以显示菜单项图标？

使用Twitter Bootstrap，是否可以在视口缩小时显示菜单项图标，而不是完全折叠菜单，只显示三条按钮？
我没有改变默认的CSS（除了应用Flatly主题）。

<nav id="navigation_bar" class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
<!--        <div class="col-xs-10 col-xs-offset-1">-->
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Hawksmoor</a>
        </div>

            @if(Auth::check())
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="/"><i class="fa fa-home"></i> Home</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-clock-o"></i> Timecard <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">View Timecard</a></li>
                        <li><a href="#">CICO</a></li>
                        <!-- <li class="divider"></li>-->
                        <!-- <li><a href="#">Separated link</a></li>-->
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-tasks"></i> Tasks <span class="badge alert-danger">2</span><b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">View Tasks</a></li>
                        <li><a href="#">Add a Task</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
                <li><a href="/people"><i class="fa fa-users"></i> People</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-file-text-o"></i> Policies <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li role="presentation" class="dropdown-header">Work</li>
                        <li><a href="#"><i class="fa fa-suitcase"></i> Business Conduct</a></li>
                        <li><a href="#"><i class="fa fa-recycle"></i> Environment</a></li>
                        <li><a href="#"><i class="fa fa-fire-extinguisher"></i> Health & Safety</a></li>

<!--                        <li class="divider"></li>-->
                        <li role="presentation" class="dropdown-header">Home</li>
                        <li><a href="#"><i class="fa fa-plane"></i> Holiday</a></li>
<!--                        <li class="divider"></li>-->
                        <li role="presentation" class="dropdown-header">Other</li>

                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                @if (Auth::guest())
                <!-- Not needed as employees will already be registered -->
                <!-- <li><a href="/register">Sign up</a></li> -->
                <!-- <li><a href="/login">Sign in</a></li> -->
                @else
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> {{ Auth::user()->profile->nickname }} <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="/profile/{{ Auth::user()->username }}"><i class="fa fa-user"></i> View Profile</a></li>
                        <li><a href="/profile/{{ Auth::user()->username }}/edit"><i class="fa fa-pencil"></i> Edit Profile</a></li>
                        <li><a href="http://webmail.hawksmoorcs.co.uk/"><i class="fa fa-envelope"></i> Webmail</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><i class="fa fa-cog"></i> Preferences</a></li>
                        <li class="divider"></li>
                        <li><a href="/logout"><i class="fa fa-power-off"></i> Sign out</a></li>
                    </ul>
                </li>
                @endif
            </ul>

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

如果有人能给我指出正确的方向，我将不胜感激。

您需要在此处执行两项基本任务：1）禁用折叠2）隐藏菜单文本
演示：http://www.bootply.com/MWsmEO9bb4#

1）禁用折叠菜单和 hamburger 图标。您可以通过覆盖引导CSS来实现，如下所示：

.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}

注意：使用!important是最简单的方法，但它也是一个核选项，因为它会使你的菜单很难操作。深入挖掘引导程序css可能会发现一些媒体查询，你可以覆盖更多的粒度...但这是更多的挖掘比我有耐心现在：）

**EDIT：**我刚想到，我下面的建议是不必要的。不需要自定义@media-query触发的类，只需使用Bootstrap的hidden-xs，如下所示：
2）在给定断点处隐藏菜单文本，如下所示：

<i class="fa fa-home"></i><span class="hidden-xs"> Home</span>

- 编辑完毕**
  **2）隐藏某个断点处的菜单文本。**您将通过使用自定义媒体查询Bootstrap的hidden-xs将文本 Package 在一个span中来完成此操作，如下所示：

<i class="fa fa-home"></i><span class="hidemobile"> Home</span></a></li>

CSS

@media (max-width: 992px) { /* or whatever breakpoint you want */
    .hidemobile {
        display:none;
    }
}

仍有一些行为需要调整（例如：如何处理你的左/右分分分菜单，何时把图标更接近在一起，以避免第二个菜单行等），但这应该让你在正确的方向。
PS -我也更新了我的bootply...

css (引导程序)当视口收缩而不是完全折叠菜单时，是否可以显示菜单项图标？

1条答案

相关问题

热门标签

最新问答