固定侧边栏在流体布局 twitter bootstrap 中答案

【问题标题】：Fixed Sidebar on the Right in fluid layout twitter bootstrap固定侧边栏在流体布局 twitter bootstrap 中
【发布时间】：2012-08-15 05:23:17
【问题描述】：

我想在我的网站右侧创建一个修复侧边栏，但是当我将 style="position:fixed;" 提供给它的 div 时，它完全位于左侧。

<div class="span2" style="position:fixed; background-color: white;">  
CONTENT 
</div>

我该怎么做？我应该为项目的每个分辨率提供一个像素位置以使其保持响应吗？

【问题讨论】：

标签： twitter-bootstrap sidebar css-position fluid-layout

【解决方案1】：

刚刚知道如何在不实际使用 jquery 的情况下做到这一点。真的很简单。

我只是想添加“right:0”来将它一直踢到右边。所以下面的代码应该做到这一点。

<div class="span2" style="position:fixed; right:0">  
CONTENT 
</div>

【讨论】：

如果你想要 Bootstrap 方式，还有 .sidebar-nav-fixed 类。

【解决方案2】：

Twitter Bootstrap 使用使用行和列的网格系统。如果您使用 .container-fluid 和 .row-fluid 类，您可以通过设置元素相对于其父级大小的大小来控制元素的位置。

这是一个工作示例：http://jsfiddle.net/chapmanc/dNRgx/1/

例如...

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span9">
            <div class="hero-unit">
                ...
            </div>
        </div>
        <div class="span3">
            <div class="well sidebar-nav">
                ...
            </div>
        </div>
    </div>
</div>

会给你一个 9 列元素，后跟一个 s 列元素，你可以制作你的侧边栏。这会将您的侧边栏放在右侧并保持您的布局响应。

【讨论】：

感谢查普曼的回答 :) 但恐怕不是我需要的，就像我添加 style="position:fixed; background-color: white;"到 span3 div，一切都向左移动...
为什么需要固定位置？使用 Twitter Bootstrap 的网格系统，布局是由行和列控制的，我认为将侧边栏固定在中间会使其消失。
我们的想法是在那里固定一个 160x600 的广告展示位置，当人们在页面上向下滚动时，它会保持固定状态，从而获得更好的点击率和转化率。感谢您抽出时间 chapman84 :) 我认为我必须根据分辨率告诉 div 在不同布局中的位置。 :(
看看这是否适合您并告诉我。如果这更符合您的要求，我会更新我的答案。 jsfiddle.net/chapmanc/dNRgx/2
当用户向下滚动时，并不是我想要修复它。我现在尝试使用 position:fixed float:right ，它仍然一直到左边