如何仅在 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

我搜索了答案，这就是我所做的 - 将 Menu 替换为您想要的文本

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

我正在为想要使用引导方式使用 grid-float-breakpoint 处理折叠元素的用户添加此答案，即导航栏未折叠的点。

因此，如果您希望元素仅在栏折叠时可见，请添加 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;
  }
}

Answer 3

简单 - 只需在“汉堡按钮”之前添加以下 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 4

有太多方法可以处理这种情况。

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 5

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

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