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

Posted 2023-02-22

【中文标题】仅在引导导航栏折叠时显示链接文本

【英文标题】：Only show link text when a bootstrap navbar is collapsed

【发布时间】：2014-02-01 03:59:57

【问题描述】：

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

现在我的bootstrap3 驱动的navbar 在未折叠时只使用图标：

navbar 折叠时会出现问题：

...链接旁边没有描述性文字，但显然有空间。去掉文字描述是为了节省空间，但是一旦折叠起来就有足够的空间……而且没有描述似乎是有缺陷的，因为占用了这么多的房地产。

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

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

在折叠的navbar 中检测元素的正确方法是什么，并且只在这种情况下显示文本？

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

还有开机：http://www.bootply.com/105538

【问题讨论】：

你能创建一个Bootply 或者修改你的代码吗？

并添加了要点。也用过bootply。我看你是那个的创造者。从来没有用过。看起来很有用。

你有什么理由不使用 jQuery 吗？只是好奇。 ***.com/a/18568776/2930161

使用 jQuery 修改我的界面需要监听什么事件？

【参考方案1】：

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

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

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


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

【讨论】：

谢谢。这解决了我在另一个答案中询问的延迟问题。最佳答案。

可能有点晚，但对偶然发现这个问题的人很有用：最好使用引导变量 @grid-float-breakpoint 和 @grid-float-breakpoint-max 而不是具体的像素值，所以如果你想改变你断点你的代码不会中断。

你是对的，但你只能在你自己构建 Bootstrap 的情况下使用它们（如果你使用的是 Less 或 Sass，建议这样做）。

【参考方案2】：

可能是我没看懂问题吧，不就是用隐藏类这么简单吗？

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

【讨论】：

这是一个完美的选择！但是，我认为他正在寻找.visible-xs-inline，将一行文本添加到现有下拉列表中，而不是添加新的。新答案来了。

【参考方案3】：

离开@pungggi 的回答：

由于引导程序已经定义了媒体查询中断，因此有一些帮助响应类可以根据网格使用的相同中断来显示/隐藏内容：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。

代码sn-p：

    <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 填充/边距或  来确保跨度文本被正确填充但不会断线。

【讨论】：

我刚刚将它添加到我自己的应用程序中，这比添加带有媒体查询的额外 css 只是为了在导航中隐藏一些文本更容易/更干净

此外，显然非显示指定类（.visible-sm 与 .visible-sm-block）已被贬值，并将在 Bootstrap v4 中删除。你知道的越多！

【参考方案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 完成你想要的。

【讨论】：

到目前为止，这是可行的，但是在打开导航栏的可折叠版本时会有一点延迟。你对那块有补救办法吗？

我在这种方法中看到的另一个问题是.in 类将保留如果窗口被调整为小，菜单打开，然后再次调整回超过阈值 - 使这种方法不-理想

延迟是由css类.collapsing替换.collapse和.collapse.in引起的，而菜单正在移动/动画。您也可以通过添加.navbar-collapse.collapsing .text-you-want-hidden-on-desktop display: inline; 来修复延迟，以确保在菜单移动时显示它，但您仍然会遇到我上面解释的状态问题，您最终可能会在屏幕上显示它们未折叠/大于移动中断。