Question

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

我有一个＆＃34;正常＆＃34;固定页面标题上的导航栏。目前，当视口减少（小设备）时，所有菜单标题都会消失并进入＆＃34;三个栏＆＃34;像这样的图标：http://getbootstrap.com/examples/navbar-fixed-top/（尝试小屏幕/视口）。

引导程序3是否可以不使所有菜单标题进入此三栏图标，而是用非常小的图标替换所有文本（例如帮助将替换为＆＃34 ;？＆＃34; icon）当视口非常小时，所有这些都有足够的空间。

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

感谢

Answer 1

这不应该是艰难的，也不需要框架。您可以使用BS3提供的responsive utility classes。有了这些，您可以隐藏大屏幕上的图标并显示标签，而在小屏幕上则相反。您的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

将标题菜单/导航栏的文本变为小视口图标（rails 4 / bootstrap3）

1 个答案: