Javascript 引导折叠图标

是否可以让引导将导航栏列表从文本更改为图标，从浏览器重新调整大小，而不是使其成为折叠下拉列表

例如，仅通过重新调整浏览器大小，将示例1变成示例2

例1：

例2：

---

当然，添加一些css，如下所示：

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

然后更新

li

s，使文本和图标都有一个跨度：

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

@media

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

编辑： 我已经更新了你的小提琴，使开关能工作。以下是我所做的：

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

.navbar header.navbar nav.navbar nav>li{float:left；}

.navbar导航{margin:5px；}

---

您也可以考虑在Bootstrap中定制<代码>网格浮点断点< /C>变量。Bootstrap仍然试图将所有按钮折叠成一个单独的移动按钮。我怎样才能阻止它，让你提到的CSS接管呢？你有没有一把小提琴，让我来看看这个问题？重新调整大小时，它仍然会变成“切换”下拉按钮，而不是变成图标。@Alan更新了响应，开始！非常感谢。

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

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