Bootstrap：隐藏导航栏崩溃时的链接

Question

我想让导航栏中的链接在导航栏崩溃时消失。

我的导航栏中有两个链接列表：

    <div class="collapse navbar-collapse navbar-left">
      <ul class ="nav navbar-nav">
        <li><%= link_to 'Home', '#home' %> </li>
        <li><a href="#food">Food</a></li>
        <li><a href="#drinks">Drinks</a></li>
        <li><a href="#enter">Entertainment</a></li>
      </ul>
    </div>
    <div class="collapse navbar-collapse navbar-right">
      <ul class="nav navbar-nav">
        ...
      </ul>
    </div>

正如所料，当我的导航栏崩溃时，我将它们折叠成两个部分，如下所示：

（我在折叠的导航栏上添加了一个“额外的”主页链接，在其他一些代码中。）

但我想要的是：

我希望顶部链接（Home，Food，Drinks，Entertainment）在导航栏崩溃时消失。如果我从他们中删除“navbar-collapse”类，他们只是（相当丑陋）留在导航栏中。我正在考虑用jQuery删除它们（在.navbar-collapse show上），但这似乎有些过分。如果导航栏再次展开也存在问题，从那时起我就会从导航栏中删除链接！有什么想法吗？

提前致谢！

编辑：这是一个JSFiddle，与我现在拥有的一样。这是一个editted JSFiddle让我做我想做的事，但使用jQuery。

Answer 1

有一个响应式实用工具类hidden-xs.

http://getbootstrap.com/css/#responsive-utilities

DEMO：http://jsfiddle.net/jnxqpwjc/2/

    <div class="hidden-xs collapse navbar-collapse navbar-left">
      <ul class="nav navbar-nav" id="removeOnCollapse">
        <li><a href="#home">Home</a></li>
        <li><a href="#food">Food</a></li>
        <li><a href="#drinks">Drinks</a></li>
        <li><a href="#enter">Entertainment</a></li>
      </ul>
    </div>

Answer 2

如果您只是需要顶部链接在导航栏折叠时消失并在导航栏完全显示时再次显示它们，您可以尝试这样做：

$('.navbar-left').on('show.bs.collapse', function() { $('.navbar-left').hide(); });
$('.navbar-left').on('hidden.bs.collapse', function() { $('.navbar-left').show(); });

如果你想删除它们而不再显示它们，你应该尝试：

$('.navbar-left').on('show.bs.collapse', function() { $('.navbar-left').remove(); });

前提是你只有一个元素使用＆＃39; .navbar-left＆＃39;当然。