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,我现在拥有的.这是一个编辑的JSFiddle与我做我想要的,但使用jQuery.

Answer 1

有一个响应实用程序类 hidden-xs.

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

演示: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>