使用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条答案
按热度按时间k4emjkb11#
您需要在此处执行两项基本任务:1)禁用折叠2)隐藏菜单文本
演示:http://www.bootply.com/MWsmEO9bb4#
1)禁用折叠菜单和 hamburger 图标。您可以通过覆盖引导CSS来实现,如下所示:
注意:使用
!important
是最简单的方法,但它也是一个核选项,因为它会使你的菜单很难操作。深入挖掘引导程序css可能会发现一些媒体查询,你可以覆盖更多的粒度...但这是更多的挖掘比我有耐心现在:)**EDIT:**我刚想到,我下面的建议是不必要的。不需要自定义@media-query触发的类,只需使用Bootstrap的
hidden-xs
,如下所示:2)在给定断点处隐藏菜单文本,如下所示:
**2)隐藏某个断点处的菜单文本。**您将通过使用自定义媒体查询Bootstrap的
hidden-xs
将文本 Package 在一个span中来完成此操作,如下所示:CSS
仍有一些行为需要调整(例如:如何处理你的左/右分分分菜单,何时把图标更接近在一起,以避免第二个菜单行等),但这应该让你在正确的方向。
PS -我也更新了我的bootply...