twitter-bootstrap - 如何为较小的设备禁用引导导航对齐折叠

Question

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

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

score 2 · Accepted Answer

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

在那里寻找媒体查询： http: //getbootstrap.com/css/#grid

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

score 1 · Accepted Answer

您必须添加 width:1% 以使其拉伸

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

score 0 · Accepted Answer

这些答案都不正确。Bootstrap 有一个内置的简单方法可以做到这一点，就像它处理顶部菜单的折叠一样。

将类添加navbar-default到nav元素。如果没有此类，它将折叠，但您不会有小展开图标（您单击以展开的三个水平线）。
将类添加navbar-collapse collapse到包含应该折叠的链接的内部 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>在应该折叠的 div 之前添加。

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

3 回答 3