在Twitter Bootstrap中设置侧栏导航的最小宽度

Question

我有一个侧边栏导航，如典型的Twitter Bootstrap example所示。

我的一些侧边栏菜单项很长。根据窗口的大小，当您更改窗口的宽度时，文本会换行到下一行，如this jsfiddle中所示。为了演示起见，我想设置侧边栏导航的最小宽度。我知道Bootstrap的CSS中有媒体标签，但我不确定这是我需要做的。基本上，我希望内容部分仍然具有响应性，但侧边栏菜单具有最小宽度(或者实际上锁定宽度可能更好)。

有没有办法固定侧边栏导航的宽度，同时确保它仍然能很好地与页面的内容部分配合使用？

Answer 1

从fluid-container中取出nav，将其位置设置为absolute，并向容器中添加一个margin-left。这不是Twitter Bootstrap的原生定位方法，但它应该可以工作。

标记：

<div class="navbar navbar-fixed-top">...</div>
<div class="the-sidebar">...</div>
<div class="container-fluid the-container>...</div>

CSS：

.the-sidebar {
    position: absolute;
    width: 220px;
}
.the-container {
    margin-left: 240px;
}

This是jsfiddle上的脚本(我使用的是Twitter Bootstrap的最新版本)

提示：

如果您想要一个始终可见的侧边栏，只需将位置更改为fixed