当Bootstrap导航栏折叠时，仅显示链接文本

Question

如何在仅当导航栏折叠时，显示链接图标/徽章旁边的链接文本？

目前，我的基于 Bootstrap3 的导航栏仅在未折叠时使用图标：

这在 navbar 折叠时会出现问题：

...除链接外，没有描述性文本，但显然有空间可以添加。删除文本描述是为了节省空间，但一旦折叠，就有充足的空间……而没有描述可能会存在问题，因为会占用很多空间。

我查看了辅助类和文档中的 collapse 功能，并尝试在包含文本之后，在 badge 或 glyphicon 标签后面放置 <span class='collapse in'> 标签。

当我这样做时，文本总是可见的，而不仅仅在收缩的 navbar 时才显示。我宁愿不使用 class='visible-xs' 或类似其实际浏览器宽度的其他类。

检测一个元素是否在一个已折叠的 navbar 中并仅在这种情况下显示文本的正确方法是什么？

这里有一个要点：https://gist.github.com/digitalextremist/6e70807a8b0e3c3da993

并且 bootply: http://www.bootply.com/105538

- digitalextremist

---

你可以创建一个Bootply，或者调整你的代码吗？ - Carol Skelly

并添加了一个代码片段。同时使用了Bootply。我看到你是它的创造者。我从未使用过它。看起来非常有用。 - digitalextremist

你不使用jQuery的原因是什么？只是好奇。https://dev59.com/vmMl5IYBdhLWcg3wP04a#18568776 - tkymtk

我应该监听哪个事件来使用jQuery修改我的界面？ - digitalextremist

Answer 1

我曾尝试使用Bootstrap Collapse插件为jQuery添加的.in类来做类似的事情，但是它并不太可靠，因为在导航栏折叠后，该类会保留并再次展开。

我建议使用CSS媒体查询。在Bootstrap 3的navbar.less文件中，786px被用作折叠导航栏的断点，因此我建议在您的CSS中使用它。

/* standard navbar */
@media (min-width: 768px) {
  ...
}

/* mobile navbar */
@media (max-width: 767px) {
  ...
}

- Nick McCurdy

---

谢谢您。这解决了我在另一个答案中提到的延迟问题。最佳答案。 - digitalextremist

也许有些晚，但对于偶然看到这个问题的人很有用： 最好使用Bootstrap变量 "@grid-float-breakpoint" 和 "@grid-float-breakpoint-max" 而不是具体的像素值，这样如果你想改变断点，你的代码就不会出现错误。 - Felix Engelmann

你说得对，但只有在自己构建Bootstrap（如果你使用Less或Sass）时才能使用它们。 - Nick McCurdy

Answer 2

也许我没有理解问题的意思，但是它不就是简单地使用隐藏类吗？

<li class="hidden-xs"><a href="#">Action</a></li>

- pungggi

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - mix3d

Answer 3

根据 @pungggi 的回答：

由于bootstrap已经定义了媒体查询断点，因此有助于响应式类来显示/隐藏基于网格使用的相同断点的东西：hidden-(size) 和 visible-(size)。这样，如果您曾经制作自己的less/sass模板，您不必在多个地方更改@media-query参数。（有关更多信息，请参见http://getbootstrap.com/css/#responsive-utilities-classes）

因此，添加带有.visible-xs-inline类的span或p标记将确保指定的文本仅在屏幕被确定为“xs”时显示，该屏幕用作折叠导航菜单的断点，并且-inline部分将确保它以行内方式显示，因为.visible-xs默认使用display:block。

代码片段：

    <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
            <a href="#" data-toggle="dropdown">
                <span class="fa fa-plus"></span>
                <!-- The following span will only show 
                     when the nav menu is collapsed -->
                <span class="visible-xs-inline">ADD SOMETHING BUTTON</span>
            </a>
             <!-- all the dropdown stuff -->
         </li>

         <li class="dropdown">
            <a href="#" data-toggle="dropdown">
                <span class="fa fa-compass" title="Energy Compass"></span>
                <span class="visible-xs-inline">ENERGY COMPASS</span>
            </a>
             <!-- all the dropdown stuff -->
         </li>
         <!-- continued list -->
    </ul>

注意：我建议使用CSS填充/边距或 来确保跨度文本正确填充，但不会断行。

- mix3d

---

我刚刚将这个功能添加到我的应用程序中，相比于使用媒体查询添加额外的CSS来隐藏导航栏中的一些文本，这种方法更加简单和干净。 - mix3d

此外，显然那些不指定显示方式的类（.visible-sm与.visible-sm-block）已经被弃用，并将在Bootstrap v4中被移除。你知道得越多，受益越大！ - mix3d

Answer 4

关于什么？

.navbar-collapse .text-you-want-hidden-on-desktop {
  display: none;
}

.navbar-collapse.in .text-you-want-hidden-on-desktop {
  display: inline;
}

我相信上面关于jQuery的评论是在暗示你可以监听show.bs.collapse事件，并采取相应措施。有关该事件的更多信息： http://getbootstrap.com/javascript/#collapse 但我认为你可以通过CSS实现你想要的效果。

- Petercopter

---

到目前为止，这个功能是有效的，但是当可折叠版本的导航栏被打开时会有轻微的延迟。你有什么解决方法吗？ - digitalextremist

我所看到的这种方法的另一个问题是，如果窗口被调整为很小，菜单打开，然后再次调整超过阈值，那么.in类就会保留下来，使该方法不理想。 - mix3d

延迟是由于CSS类“。collapsing”替换了“.collapse”和“.collapse.in”，而菜单正在移动/动画。您可以通过添加“.navbar-collapse.collapsing .text-you-want-hidden-on-desktop {display：inline;}”来解决延迟，以确保在菜单移动时显示它，但仍然会遇到我上面提到的状态问题，在未展开屏幕/大于移动断点的情况下可能会出现。 - mix3d