在 Bootstrap 折叠的导航栏中有不同的内容答案

【问题标题】：Have different content in Bootstrap collapsed navbar在 Bootstrap 折叠的导航栏中有不同的内容
【发布时间】：2013-11-20 13:41:36
【问题描述】：

我在 Bootstrap 2.3 中使用响应式固定导航栏。

有没有办法让不同的元素出现在导航栏的折叠版本中？我知道

<div class="nav-collapse collapse">
</div>

栏折叠时部分将消失，但我希望在栏的不同模式下显示不同的内容。

例如，如果栏处于完整模式，则有一个长按钮，但当窗口很小时，我希望有一个小按钮。我可以在“nav-collapse collapse”div 之前放置一个按钮，这样它就会在两种模式下出现，但在两种情况下都是一样的。

也许有一个“折叠事件”我可以在栏折叠时挂钩，然后动态更改我的元素？

【问题讨论】：

标签： javascript html css twitter-bootstrap

【解决方案1】：

您可以使用响应式实用程序类来显示/隐藏不同的按钮...

<div class="nav-collapse collapse">
        <button type="submit" class="btn hidden-tablet hidden-phone">Big Long Button</button>
        <button type="submit" class="btn hidden-desktop btn-mini">Small</button>
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
</div>

演示：http://bootply.com/92760

【讨论】：