twitter-bootstrap 如何仅在 Bootstrap 中折叠的导航栏上显示文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14987451/
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
How can I display text only on the collapsed navbar in Bootstrap?
提问by Tom Brossman
I'd like to display a telephone number that appears on the navbar next to the navbar toggle button. The toggle button only appears once the navbar is in the collapsed state. I'd like the text to appear next to it.
我想在导航栏切换按钮旁边的导航栏中显示一个电话号码。切换按钮仅在导航栏处于折叠状态时出现。我希望文本出现在它旁边。
Here's what I have now:
这是我现在所拥有的：
And here's what I am trying to achieve:
这就是我想要实现的目标：
HTML from the relevant divs:
来自相关 div 的 HTML：
<div class="header-centered"><img src="http://placehold.it/350x150"></div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<button type="button" 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>
</button>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</div>
</div>
</div>
</div>
I don't want the text to appear unless the navbar is collapsed. How can this be achieved?
除非导航栏折叠，否则我不希望文本出现。如何做到这一点？
采纳答案by Jefferson Henrique C. Soares
You can control the visibility of your text by CSS, something like this:
您可以通过 CSS 控制文本的可见性，如下所示：
.abcde .text {
display: none;
}
.abcde.collapse .text {
display: inline-block;
}
回答by user2011075
Easy - just add the following HTML right before the 'hamburger button'
简单 - 只需在“汉堡按钮”之前添加以下 HTML
<p class="navbar-text visible-xs-inline-block">Menu</p>
Then style it to suit.
然后设计适合的样式。
p.navbar-text {
font-size: 22px;
margin-top: 8px;
padding-bottom: 0;
text-align: right;
width: 70%;
}
回答by Akshaya Raghuvanshi
There are too many ways to handle this situation.
处理这种情况的方法太多了。
Display: none;It's a browser friendly, they no more assume any element because its in permanently hidden state.Visibility: hidden;it can hide any element on your document but still it has a limitation, browsers'll have to find that element on the page and then they hide that element. So for a few of few milliseconds but they have to work a bit to hide this.- By keeping
font-size: 0;and after collapsing state usefont-size: 1em;. - Keep
opacity: 0and later onopacity: 1. postion: absolute;left:-99999em;and and laterleft:0;- You can use z-index if you have positioned element. Stacking the element in order also works.
Display: none;这是一个浏览器友好的，他们不再假设任何元素，因为它处于永久隐藏状态。Visibility: hidden;它可以隐藏文档上的任何元素，但它仍然有一个限制，浏览器必须在页面上找到该元素，然后才能隐藏该元素。所以在几毫秒内，但他们必须努力隐藏这一点。- 通过保持
font-size: 0;和折叠状态后使用font-size: 1em;。 - 保持
opacity: 0和以后opacity: 1。 postion: absolute;left:-99999em;后来left:0;- 如果您已定位元素，则可以使用 z-index。按顺序堆叠元素也有效。
So, finally there are a whole bunch of methods to hide and show elements on your document. It all depends on you whatever you choose.
But according to me Display: none;is the best one for your project.
所以，最后有一大堆方法可以隐藏和显示文档中的元素。无论您选择什么，这一切都取决于您。但在我看来，这Display: none;是最适合您的项目的。
回答by David Sims
I searched for the answer and this is what I did - replace Menu with your desired text
我搜索了答案，这就是我所做的 - 用您想要的文本替换菜单
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar btn-block" data-target=".navbar-inverse-collapse" data-toggle="collapse">
<span class="icon icon-white icon-align-justify"></span> MENU</a>
<div class="nav-collapse collapse navbar-inverse-collapse">
<ul class="nav">
回答by MQ87
I'm adding this answer for users that want to use bootstrap way of handling collapsing element using the grid-float-breakpoint , that is the point at which the navbar becomes uncollapsed.
我正在为想要使用 bootstrap 方式使用 grid-float-breakpoint 处理折叠元素的用户添加此答案，这是导航栏未折叠的点。
So if you want elements that is visible only when the bar is collapsed add the collapsed-addonclass and include this css.
因此，如果您希望元素仅在栏折叠时可见，请添加collapsed-addon类并包含此 css。
The default gird-float-breakpoint value is setted to screen-sm-min that is 768px
默认的 gird-float-breakpoint 值设置为 screen-sm-min，即 768px
@media (min-width: 768px){
.collapsed-addon {
display: none;
}
If you are using some processors use the css variable grid-float-breakpoint
如果您使用某些处理器，请使用 css 变量 grid-float-breakpoint
@media (min-width: $grid-float-breakpoint){
.collapsed-addon {
display: none;
}
}
