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

n9vozmp4  于 2022-11-27  发布在  其他
关注(0)|答案(1)|浏览(122)

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

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

k4emjkb1

k4emjkb11#

您需要在此处执行两项基本任务: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...

相关问题