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

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

现在，我的

bootstrap3

driven

navbar

仅使用图标，当它被解压时：

当

导航栏

折叠时，这是有问题的：

。。。链接旁边没有描述性文本，但显然有空间。删除文本描述是为了节省空间，但一旦折叠，就有足够的空间。。。而且，由于占用了如此多的房地产，它在没有描述的情况下似乎是有缺陷的

我查看了文档中的帮助器类和

折叠

功能，并尝试将

标记放在包含文本的

标记

或

字形图标

标记之后

当我这样做时，文本总是可见的，而不仅仅是当

navbar

折叠时。根据实际的浏览器宽度，我不希望使用

class='visible-xs'

或其他类似的类

检测折叠的

导航栏中的元素并在这种情况下仅显示文本的正确方法是什么

这里有一个要点：

和bootply:
那怎么办

.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
事件，并相应地采取行动。有关该活动的更多信息：

但是我相信你可以用CSS实现你想要的。
我曾经尝试过类似的
。在由Bootstrap的折叠插件为jQuery添加的
类中，但是它不是很可靠，因为在导航栏折叠然后解压之后，该类将保持不变

我建议改用CSS媒体查询。在bootstrap3的
navbar.less
文件中，
786px
被用作折叠navbar的断点，因此我建议在CSS中使用它

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

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

也许我没有正确理解这个问题，但它不是像使用隐藏类那样简单吗

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


关于蓬吉的回答：

由于bootstrap已经定义了媒体查询中断，因此有一些帮助响应类可以根据网格使用的相同中断显示/隐藏内容：
hidden-（size）
和
visible-（size）
。这样，如果您制作了自己的基于less/sass的模板，就不必在多个地方更改@media query参数。（有关更多信息，请参阅）

因此，在
.visible xs inline
类中添加
span
或
p
标记将确保指定文本仅在屏幕被确定为“xs”时显示，该屏幕被用作折叠导航菜单的断点，
-inline
部分将确保其显示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填充/边距，或
，以确保跨距文本被正确填充，但不会出现特征线。
您是否可以创建或修改代码？并添加了要点。也使用bootply。我看你是这一切的创造者。从来没用过。看起来很有用。有什么理由不使用jQuery吗？只是好奇。使用jQuery修改我的界面时，我会监听什么事件？到目前为止，这是可行的，但打开可折叠版本的导航栏时会有一点延迟。你对此有什么补救办法吗？我在这种方法中看到的另一个问题是，
类中的
。如果窗口大小调整为较小，菜单打开，然后重新调整大小，使其超过阈值-使此方法不理想延迟是由css类
.collasing
替换
.collapse
和
.collapse.in
引起的，同时菜单正在移动/设置动画。您可以通过添加
.navbar-collapse.collasing.text来修复延迟，您希望在桌面上隐藏的文本{display:inline；}
，以确保它在菜单移动时显示，但您仍然会遇到我上面解释的状态问题，当屏幕未折叠/比手机屏幕更大时，您可以在屏幕上显示它们。谢谢。这解决了我在另一个答案中提出的延迟问题。最好的答案。可能有点晚，但对偶然发现这个问题的人有用：最好使用引导变量
@grid float breakpoint
和
@grid float breakpoint max
，而不是具体的像素值，所以如果你想更改断点，你的代码不会中断。你是对的，但是你只能在你自己构建引导的情况下使用它们（如果你使用更少或更少的Sass，建议这样做）。这是一个完美的选择！然而，我认为他正在寻找
.visible xs inline
，以便在现有下拉列表中添加一行文本，而不是添加新文本。新的答案来了。我刚刚把它添加到我自己的应用程序中，这比添加额外的css和媒体查询更容易/更干净，只是为了在导航中隐藏一些文本。显然，非显示指定类（
.visible sm
vs
.visible sm block
）会贬值，并将在引导v4中删除。你知道的越多！