Html Twitter引导品牌仅在折叠模式下显示
我正在使用twitter引导响应导航栏,我试图找出如何使品牌只在导航栏处于折叠模式时才显示出来 我想可能需要一些额外的js,但我不确定这是什么,或者放在哪里 以下是我得到的:Html Twitter引导品牌仅在折叠模式下显示,html,twitter,twitter-bootstrap,Html,Twitter,Twitter Bootstrap,我正在使用twitter引导响应导航栏,我试图找出如何使品牌只在导航栏处于折叠模式时才显示出来 我想可能需要一些额外的js,但我不确定这是什么,或者放在哪里 以下是我得到的: <div class="navbar"> <div class="navbar-inner"> <div class="container"> <!-- .btn-navbar is used as the toggle for collapsed navbar
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Navigation</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav nav-pills">
<li><a href="#">Nav 1</a></li>
<li><a href="#">Nav 2</a></li>
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
href="#">
Programs
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<!-- links -->
<li><a href="#">Program 1</a></li>
<li><a href="#">Program 2</a></li>
<li><a href="#">Program 3</a></li>
<li class="divider"></li>
<li><a href="#">Program A</a></li>
<li><a href="#">Program B</a></li>
<li><a href="#">Program C</a></li>
</ul> <!-- closes dropdown menu -->
</li> <!-- closes dropdown class -->
</ul> <!-- closes nav-pills -->
</div> <!-- closes collapse -->
</div> <!-- closes container -->
</div> <!-- closes navbar-inner -->
</div> <!-- closes overall navbar -->
-
现在,品牌一直在显示,但我希望它只在折叠模式下显示,以便观众知道这是导航栏。他们不需要在大屏幕模式下看到它
任何资源都可能有所帮助
谢谢你抽出时间
Craig解决此问题的简单方法是使用Bootstrap提供的响应实用程序类: 引导程序4: 引导程序4 alpha: 引导程序3: 例子:
引导程序2:
例子:
对于引导3,请使用以下类 参考:
由于Bootstrap3.2 visible xs、visible sm等已被弃用。参考: 因此,在这种情况下,您应该使用:
<a class="brand visible-xs-block" href="#">Navigation</a>
或
或
取决于此链接应应用何种类型的显示
属性
只有当导航被折叠时,才会显示您的
导航
品牌链接brilliant,谢谢。我一定是起得太晚了,因为我在其他地方使用这些类,甚至没有想到在这里使用它。使用Bootstrap 3,这可以通过visible xs
实现。使用Bootstrap 4 Beta,它不再隐藏-*了,请参阅文档:
<a class="brand hidden-desktop" href="#">Navigation</a>
<a class="brand visible-xs-block" href="#">Navigation</a>
<a class="brand visible-xs-inline" href="#">Navigation</a>
<a class="brand visible-xs-inline-block" href="#">Navigation</a>