3

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

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

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

4

1 回答 1

5

从nav中取出fluid-container，将其位置设置为absolute并将 a 添加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

于 2012-08-27T07:22:37.710 回答