css - 将标题菜单/导航栏的文本变成小视口(viewport)的图标(rails 4/bootstrap3)

Question

我在 Rails 4 应用程序上使用 bootstrap 3。

我在页眉上有一个“正常”的固定导航栏。目前，当视口(viewport)减小(小设备)时，所有菜单标题都会消失并进入“三栏”图标，如下所示:http://getbootstrap.com/examples/navbar-fixed-top/ (在小屏幕/视口(viewport)上尝试)。

bootstrap 3 是否有可能不让所有菜单标题都进入这个三栏图标，而是用非常小的图标替换所有文本(例如帮助将被替换为“？”图标)，以便在视口(viewport)非常小时，所有这些都有足够的空间。

Bootstrap 中是否已经内置了一些允许这样做的东西？或者一些与 BS3 配合良好的外部库？

谢谢

Answer 1

这应该不会太难，也不需要框架。您可以使用 responsive utility classes由 BS3 提供。有了这些，您可以在大屏幕上隐藏图标并显示标签，而在小屏幕上则相反。您的 navbar 标记看起来像这样:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">

    <ul class="nav navbar-nav">
      <li class="active"><a href="#">
        <i class='glyphicon glyphicon-user visible-xs-inline-block'></i>
        <span class='hidden-xs'>Link</span>
      </a></li>
      <li><a href="#">
        <i class='glyphicon glyphicon-user visible-xs-inline-block'></i>
        <span class='hidden-xs'>Link</span>
      </a></li>
    </ul>
  </div>
</nav>

并且需要一小行 css 来防止 li 在小屏幕上显示为 block。像这样的东西应该可以解决问题:

.nav>li {
    display: inline-block;
}

还有一个例子来演示:http://www.bootply.com/a17IsJ0Pop