Question

使用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>

Full-width

Collapsed

如果有人能指出我正确的方向，那将非常感激。

Answer 1

您需要在此处执行两项基本任务：1）禁用折叠2）隐藏菜单文本

演示：http://www.bootply.com/MWsmEO9bb4#

1）禁用折叠菜单和汉堡包图标。你可以通过覆盖bootstrap 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是最简单的方法，但它也是一个核选项，因为它可以使您的菜单稍后难以操作。深入研究bootstrap css可能会揭示一些媒体查询，你可以更细粒度地覆盖......但这比我现在有耐心的挖掘更多：）

编辑：它刚刚发生在我身上，我在下面建议的是不必要的。不需要自定义的@ media-query触发类，只需使用Bootstrap的hidden-xs，如下所示：

2）在给定断点处隐藏菜单文本，如下所示：

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

就是这样！编辑

2）在某个断点处隐藏菜单文本。您可以通过使用~~自定义媒体查询将文本包装在一个范围内来完成此操作~~ Bootstrap的{{1像这样：

hidden-xs

CSS

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

还有一些你可能想要调整的行为（例如：如何处理左/右分割菜单，何时将图标拉近以避免第二个菜单行等）但这应该让你进入正确的方向。

PS - 我也更新了我的bootply ......

（Bootstrap）当视口缩小而不是完全折叠菜单时，是否可以显示菜单项图标？

1 个答案: