仅折叠引导导航栏时显示链接文本

Question

仅当navbar折叠时,如何在链接的图标/徽章旁边显示链接文本？

现在我的bootstrap3驱动navbar仅使用图标,当它未被坍塌时:

navbar折叠时出现问题:

......链接旁边没有描述性文字,但显然有空间.删除文本描述是为了节省空间,但是一旦折叠就有足够的空间......而且没有描述它似乎是有缺陷的,因为占用了大量的空间.

我查看了帮助程序类和collapse文档中的功能,并尝试将<span class='collapse in'>标记放在包含文本,badge或glyphicon标记之后.

当我这样做时,文本始终可见,而不仅仅是在navbar折叠时.class='visible-xs'根据实际的浏览器宽度,我不想使用或类似的其他类.

navbar在这种情况下,检测元素的正确方法是折叠并仅显示文本？

这是一个要点: https ://gist.github.com/digitalextremist/6e70807a8b0e3c3da993

和bootply:http://www.bootply.com/105538

Answer 1

我试图用类似于.inBootstrap的Collapse插件为jQuery添加的类做一些类似的事情,但是它不是很可靠,因为在导航栏崩溃然后解开之后,类会停留.

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

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

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

Answer 2

关于什么

.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 完成你想要的事情。