Question

当navbar折叠后，如何在链接的图标/徽章旁边显示链接文字？

现在我的bootstrap3驱动navbar仅使用图标，当它未展开时：

enter image description here

navbar折叠时出现问题：

enter image description here

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

我查看了文档中的帮助程序类和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

我尝试使用Bootstrap的Javascript插件添加的.in类做类似的事情，但它不是很可靠，因为在导航栏崩溃然后解除后，类会保持不变。

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

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

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

Answer 2

关闭@ pungggi的回答：

由于bootstrap已经定义了媒体查询中断，因此有一些帮助响应类可以根据网格使用的相同中断显示/隐藏内容：hidden-(size)和visible-(size)。这样，如果您创建自己的基于less / sass的模板，则不必在多个位置更改@ media-query参数。（有关详细信息，请参阅http://getbootstrap.com/css/#responsive-utilities-classes）

因此，在span类中添加p或.visible-xs-inline标记可确保仅在确定屏幕时显示指定的文字＆＃39; xs＆＃39;用作折叠导航菜单的断点，-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填充/边距或 以确保跨度文本正确填充但不会出现断线。

Answer 3

怎么样？

.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实现你想要的目标。

Answer 4

也许我没有理解正确的问题，但是不是像使用隐藏的类一样简单吗？

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

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

4 个答案: