如何仅在Bootstrap中折叠的导航栏上显示文本？

Question

我想显示导航栏切换按钮旁边导航栏上显示的电话号码。 只有在导航栏处于折叠状态时才会出现切换按钮。 我希望文本旁边出现。

这就是我现在拥有的：

这就是我想要实现的目标：

来自相关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>

除非导航栏被折叠，否则我不希望文本出现。 怎么能实现这一目标？

Answer 1

您可以通过CSS控制文本的可见性，如下所示：

.abcde .text {
  display: none;
}
.abcde.collapse .text {
  display: inline-block;
}

Answer 2

简单 - 只需在“汉堡按钮”之前添加以下HTML

<p class="navbar-text visible-xs-inline-block">Menu</p>

然后设计它以适应。

p.navbar-text {  
  font-size: 22px;
  margin-top: 8px;
  padding-bottom: 0;
  text-align: right;
  width: 70%;
}

Answer 3

处理这种情况的方法太多了。

1. Display: none; 这是一个浏览器友好，他们不再假设任何元素，因为它处于永久隐藏状态。
2. Visibility: hidden; 它可以隐藏文档中的任何元素，但仍有限制，浏览器必须在页面上找到该元素，然后隐藏该元素。 因此，在几毫秒内，他们必须努力隐藏这一点。
3. 保持font-size: 0; 折叠状态后使用font-size: 1em; 。
4. 保持opacity: 0和稍后的opacity: 1 。
5. postion: absolute; left:-99999em; 然后left:0;
6. 如果您有定位元素，则可以使用z-index。 按顺序堆叠元素也有效。

因此，最后有一大堆方法可以隐藏和显示文档中的元素。 无论你选择什么，这一切都取决于你。 但根据我Display: none; 是您项目中最好的一个。

Answer 4

我搜索了答案，这就是我所做的 - 用你想要的文字替换菜单

<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">

Answer 5

我正在为那些想要使用bootstrap方法处理崩溃元素的用户添加这个答案，这个方法是使用grid-float-breakpoint，即导航栏变为uncollapsed的点。

因此，如果您想要仅在折叠栏时可见的元素，请添加collapsed-addon类并包含此css。

默认的gird-float-breakpoint值设置为screen-sm-min，即768px

@media (min-width: 768px){
  .collapsed-addon {
    display: none;
}

如果您使用的是某些处理器，请使用css变量grid-float-breakpoint

@media (min-width: $grid-float-breakpoint){
  .collapsed-addon {
    display: none;
  }
}