Bootstrap 流体布局 - 侧边栏的固定宽度答案

【问题标题】：Bootstrap fluid layout - fixed width of sidebarBootstrap 流体布局 - 侧边栏的固定宽度
【发布时间】：2012-03-06 18:03:22
【问题描述】：

我有一个基于 twitters bootstrap 的流畅布局。

<div class="container-fluid">
    <div class="row-fluid">
       <div class="span2">
           <!--Sidebar content-->
       </div>
       <div class="span10">
           <!--Body content-->
       </div>
    </div>
</div>

如果侧边栏有固定的宽度，那就太好了。如果将布局从流体更改为“静态”并将侧边栏的宽度设置为

220px

然后我调整窗口大小或将分辨率更改为 1024...正文内容跳到侧边栏下方。我怎样才能避免这种情况？

编辑：知道了。稍后将发布我的“解决方案”。感谢您的回复

【问题讨论】：

你能用jsfiddle之类的东西建立一个测试用例吗？不太明白你在这里寻找的效果。
那么……你的这个著名的“解决方案”是什么？ :)
是的，发布您的解决方案，我也很感兴趣，固定宽度的侧边栏与页面的其余部分流畅......我做不到
这里有一个解决方案：ekdhl.net/blog/2012/10/19/…
“我找到了一个非常出色的解决方案来解决这个问题，但我无法将它放在 stackoverflow 评论中。” ——詹斯。 ;)

标签： css tooltip twitter-bootstrap sidebar

【解决方案1】：

我认为你看起来像这样：

<div class="sidebar span4">
    this is my fixed sidebar
</div>
<div class="main">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span2">this is fluid</div>
            <div class="span3 offset1">yeah!</div>
            <div class="span6">Awesome!</div>
        </div>
        <div class="row-fluid">
            <div class="span6">1 half</div>
            <div class="span6">2 half</div>
        </div>
    </div>
</div>

为了您的方便，这里有一个小提琴：http://jsfiddle.net/TT8uV/2/

如一般说明：

您不需要使用引导程序作为您的“主容器”，因此您可以将您的与网格系统并排的侧边栏（如引导程序流畅且反应灵敏）。这样您就可以大量控制侧边栏，不影响实际内容。

希望它对你有用。

【讨论】：

这是解决固定宽度的唯一答案。其他都是关于固定位置的。 +1
我很欣赏这种尝试，但问题是，右侧主要的第二行浮动低于右侧边栏的底部。注意 '1 half' 和 '2 half' （它们是主导航中第二行流体中的跨度）如何在其下方浮动：jsfiddle.net/TT8uV/2/show
我不认为这与解决方案有关，但无论哪种方式，我都会使用 overflow:auto 更新到此处的行：jsfiddle.net/TT8uV/35 或者您可以发布：绝对侧边栏jsfiddle.net/TT8uV/36
这是正确的解决方案 - 您不需要对所有内容都使用 Bootstrap 网格。最好有一个单独的侧边栏。请接受这个答案！

【解决方案2】：

我想这就是你需要的：http://jsfiddle.net/U8HGz/1/

【讨论】：

不，因为侧边栏是固定的。我的右行/容器的宽度约为 3000-4000 像素。所以如果我向右滚动，侧边栏总是在顶部。但感谢您的回复