4

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

这是我现在拥有的：

折叠的导航栏

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

带有文本的折叠导航栏

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

除非导航栏折叠，否则我不希望出现文本。如何做到这一点？

4

5 回答 5

3

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

.abcde .text {
  display: none;
}
.abcde.collapse .text {
  display: inline-block;
}
于 2013-02-20T20:17:50.553 回答
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%;
}
于 2015-08-20T06:47:14.310 回答
1

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

  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;，这是最适合您项目的一个。

于 2013-02-23T05:48:30.240 回答
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">
于 2013-06-06T09:23:49.023 回答
1

我正在为想要使用引导方式使用 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;
  }
}
于 2015-10-14T09:28:20.797 回答