我想让我的导航栏中的链接在导航栏折叠时消失。
我的导航栏中有两个链接列表:
<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>
正如预期的那样,当我的导航栏折叠时,我将它们折叠成两个部分,如下所示:
(我自己在折叠的导航栏上用其他代码添加了一个“额外”主页链接。)
不过,我想要的是:
我希望顶部链接(主页、食物、饮料、娱乐)在导航栏折叠时消失。如果我从它们中删除“navbar-collapse”类,它们就会(相当丑陋)留在导航栏中。我正在考虑用 jQuery 删除它们(在 .navbar-collapse show 上),但这似乎有点过分了。如果导航栏再次展开也是有问题的,从那时起我就会从导航栏中删除链接!有什么想法吗?
提前致谢!
编辑:这是一个JSFiddle ,用我现在所拥有的。这是一个 editted JSFiddle和我一起做我想做的事,但使用 jQuery。
最佳答案
有一个响应式实用类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>
关于javascript - Bootstrap : hide links on navbar collapse,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25232447/