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

Question

我有一个侧栏导航,如典型的Twitter Bootstrap示例所示.

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

有没有办法来修复sidebarnav的宽度,但确保它仍然可以很好地与页面的内容部分一起使用？

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