Question

是否有可能使Bootstrap将导航栏列表从文本更改为重新调整大小的图标而不是将其变为崩溃下拉？

例如，将示例1转换为示例2，仅从浏览器重新调整大小。

示例1：

  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>

示例2：

  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
      <li><a href="#about"><span class="glyphicon glyphicon-info-sign"></a></li>
      <li><a href="#contact"><span class="glyphicon glyphicon-envelope"></a></li>
    </ul>

Answer 1

当然，添加一些像这样的CSS：

.nav .glyphicon {
        display: none;
    }
@media screen and (max-width: 300px){
    .nav .text {
        display: none;
    }
    .nav .glyphicon {
        display: inline;
    }
}

然后更新li以获得文本和图标的范围：

<li>
    <a href="#"><span class="text">Home</span><span class="glyphicon glyphicon-home"></span></a>
</li>

@media样式指定当屏幕宽度为300px或更小时，然后隐藏文本并显示图标。默认情况下隐藏图标。

编辑：我已经更新了你的小提琴，让开关正常工作。这就是我的所作所为： http://jsfiddle.net/cPa6b/

删除了导航栏标题中的按钮
删除了导航栏div上的折叠样式
在媒体查询中添加了2个新样式以抵消bootstrap的样式（也将最大宽度更改为768以匹配bootstrap的默认值）：

.navbar-header, .navbar-nav, .navbar-nav > li { float: left; }

.navbar-nav { margin: 5px; }

您还可以考虑在引导程序中自定义@grid-float-breakpoint变量，如此处所述http://getbootstrap.com/components/#navbar

Bootstrap崩溃图标

1 个答案: