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

【问题标题】：Set a minimum width for the sidebar-nav in Twitter Bootstrap在 Twitter Bootstrap 中设置侧边栏导航的最小宽度
【发布时间】：2012-08-27 19:34:56
【问题描述】：

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

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

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

【问题讨论】：

也许只是将侧边栏更改为“span4”，将主要内容区域更改为“span8”？
这使得侧边栏比我想要的更宽。基本上，我更希望侧边栏是适合那里内容的设置宽度，而不是动态变化，这会导致它有时太宽而有时太窄。

标签： css twitter-bootstrap

【解决方案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

【讨论】：