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

Question

我有一个侧边导航栏，就像Twitter Bootstrap示例中一样。

我的一些侧边菜单项很长。根据窗口的大小，文本会换到下一行，就像在这个jsfiddle中，当你改变窗口的宽度时会出现。为了呈现效果，我想为侧边导航栏设置一个最小宽度。我知道Bootstrap的CSS中有媒体标签，但我不确定那是否是我需要做的事情。基本上，我希望内容部分仍然具有响应性，但侧边菜单具有最小宽度（或者实际上锁定宽度可能更好）。

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

- Ed.

---

也许只需要将侧边栏更改为“span4”，将主内容区域更改为“span8”？ - Billy Moat

这使得侧边栏比我想要的宽。基本上，我更喜欢侧边栏是适合内容的固定宽度，而不是动态变化，有时太宽，有时太窄。 - Ed.

Answer 1

将nav从fluid-container中取出，设置其位置为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;
}

这里是在jsfiddle上的脚本（我使用了最新版本的Twitter Bootstrap）

提示：

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

- albertedevigo