Html Twitter Bootstrap 品牌仅在折叠模式下显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13442851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap Brand Display Only in Collapse Mode
提问by Craig Grella
I'm working with twitter bootstrap responsive nav bar and I'm trying to figure out how to make the brand show up only when the nav bar is in collapsed mode.
我正在使用 twitter bootstrap 响应式导航栏，我试图弄清楚如何让品牌仅在导航栏处于折叠模式时显示。
I'm thinking there might need to be some extra js involved but i'm not sure what that is or where to put it.
我认为可能需要涉及一些额外的 js，但我不确定那是什么或把它放在哪里。
Here's what I've got:
这是我所拥有的：
<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 -->
Right now, brand displays all the time, but I want it to display only when in collapsed mode so viewers know that is the nav bar. They don't need to see it in larger screen modes.
现在，品牌一直显示，但我希望它仅在折叠模式下显示，以便观众知道那是导航栏。他们不需要在更大的屏幕模式下看到它。
Any resource might help.
任何资源都可能有所帮助。
Thanks for your time.
谢谢你的时间。
Craig
克雷格
回答by HaNdTriX
An easy way to solve this problem is to use the Responsive utility classes provided by Bootstrap:
解决这个问题的一个简单方法是使用 Bootstrap 提供的 Responsive 实用程序类：
Bootstrap 4:
引导程序 4：
Bootstrap 4 alpha:
Bootstrap 4 alpha：
Bootstrap 3:
引导程序 3：
Example:
例子：
<a class="brand hidden-lg" href="#">Navigation</a>
Bootstrap 2:
引导程序 2：
Example:
例子：
<a class="brand hidden-desktop" href="#">Navigation</a>
回答by Shoaib Iqbal
For Bootstrap 3 use the below classes Ref: http://getbootstrap.com/css/#responsive-utilities-classes
对于 Bootstrap 3，使用以下类参考：http: //getbootstrap.com/css/#responsive-utilities-classes
回答by Marcin Nabia?ek
Since Bootstrap3.2 visible-xs, visible-sm etc. are deprecated. Reference: http://getbootstrap.com/css/#responsive-utilities-classes
由于 Bootstrap3.2 visible-xs、visible-sm 等已被弃用。参考：http: //getbootstrap.com/css/#responsive-utilities-classes
So in this case you should use either:
因此，在这种情况下，您应该使用：
<a class="brand visible-xs-block" href="#">Navigation</a>
or
或者
<a class="brand visible-xs-inline" href="#">Navigation</a>
or
或者
<a class="brand visible-xs-inline-block" href="#">Navigation</a>
depending what type of displayproperty should be applied to this link.
取决于display应该将什么类型的属性应用于此链接。
This will display your Navigationbrand link only when your navigation is collapsed
这将Navigation仅在您的导航折叠时显示您的品牌链接
