如何为较小的设备禁用bootstrap nav-justified collapse

Question

我正在使用bootstrap来证明一堆标签可以均匀地适合父元素的宽度。 这对我很重要。然而，Bootstrap会自动将这些设备折叠为较小的设备，使它们具有100％的宽度，这是我不想要的。 如何禁用此功能？ 简单代码：

<ul class="nav nav-tabs nav-justified>
    <li></li>
    <li></li>
    <li></li>
</ul>

由于

Answer 1

您可以添加类col-xs-12的容器，因此它将堆叠在非常小的显示器上。毕竟，如果您希望它在所有显示中都不是堆叠的，只需编写媒体查询。

查看媒体查询： http://getbootstrap.com/css/#grid

如果您分享更多代码，那么我可以更具体地回答。

Answer 2

您必须添加宽度：1％才能拉伸

.nav-justified > li {
    display: table-cell; 
    width: 1%
}

Answer 3

这些答案都不正确。 Bootstrap有一个内置的简单方法，就像处理顶层菜单的崩溃一样。

1. 将班级navbar-default添加到nav元素。没有这个课程就会崩溃，但是你没有获得小的展开图标（你点击展开的三条水平线）。

2. 将类navbar-collapse collapse添加到内部div，其中包含应折叠的链接。

3. 在应该崩溃的div之前添加<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>。

这会变得相当混乱，试图剪切并粘贴上面的3个步骤;我所做的就是从顶部的工作导航栏中复制并粘贴这些部分，然后将它们逐个粘贴。不过，您需要这3个元素：navbar-default，navbar-collapse和按钮。