在导航栏中从图标切换到标签

Question

我使用Bootstrap 3.1.1创建了一个网站，并使用响应式设计来允许可折叠设备。

用例是：

1. 对于桌面版，导航栏应显示图标
2. 如果宽度较小，则应显示下拉列表，但使用标签代替图标。

我创建了JSBin to replicate the scenario

是否有内置技术，或者在崩溃发生时移动到jQuery以删除glyphicon类？

Answer 1

在navbar-collapse div内创建2个div。一个div用于显示图标，另一个div用于标签。在带有标签的div上使用.visible-xs类，在div上使用.visible-sm .visible-md .visible-lg类，其中包含桌面版的图标。

有关详情，请查看Responsive classes, Bootstrap3

代码示例

<ul class="visible-sm visible-md visible-lg navbar-nav nav">
      <li>
        <a href="#">
          <span class="glyphicon glyphicon-home"></span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="glyphicon glyphicon-question-sign"></span> 
        </a>
      </li>
    </ul>
    <!-- Smaller screen -->

      <ul class="visible-xs navbar-nav nav ">
      <li>
        <a href="#">
          <span>Home</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>Help</span>
        </a>
      </li>
    </ul>