Question

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

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

中的所有内容

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

当条形图折叠时，

部分将消失，但我想在条形图的不同模式中显示不同的内容。

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

也许有一个“崩溃事件”，当条形图折叠然后动态更改我的元素时我可以挂钩？

Answer 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

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

1 个答案: