2 列固定 - 可滚动答案

【问题标题】：2 Columns with Fixed - Scrollable2 列固定 - 可滚动
【发布时间】：2014-03-02 07:42:32
【问题描述】：

我有 2 个Columns，我需要第一个是fixed，其中第二个有很长的列表并且需要可滚动。

<div class="row">
  <div class="col-md-9"></div>
  <div class="col-md-3"></div>
</div>

Col-md-9 的列表很长，Col-md-3 需要是fixed。我已经尝试了一段时间来使其正常工作，但事情一直在中断。

当我尝试position:fixed 时，col-md-3 会自动向左浮动。我试图给所有东西设置宽度，甚至从 Bootstrap 中删除了网格系统，但我无法让它工作。

我可以像这样硬编码：

<div class="col-md-9" style="float: left;width: 100%;margin-right: 243px">

和

<div class="col-md-3" style="float: right;width: 243px;position: fixed;margin-left: 728px">

但这会像地狱一样破坏响应性......

编辑

感谢@Edu Lomeli 指出Affix Js。作为引导文档：

The subnavigation on the right is a live demo of the affix plugin.

这就是我正在寻找的确切行为。问题是我不完全理解它。如果有谁用过或者有知识的可以随时回答。

【问题讨论】：

那么有什么理由使用 Twitter 引导程序？
是的，整个应用都是用 Bootstrap 构建的！
默认情况下有几种样式应用于列，例如float。这些可能与您要查找的内容相冲突。
试图左右浮动，但它不起作用。
不确定是否要实现，但可以尝试使用Affix JS

标签： html css twitter-bootstrap two-columns

【解决方案1】：

使用 Affix JS 并通过将 Col-md-3 移到左侧来修复它

<div class="container">
  <div class="row">
    <div class="col-sm-3" data-spy="affix" data-offset-top="0"></div>
    <div class="col-md-9"></div>
  </div>
</div>

看看----->Bootply

【讨论】：

【解决方案2】：

您需要对position:fixed 进行一些额外的定义。现在要管理该元素的左右位置，您必须使用right,left,top,bottom css 端口。例如：

<div class="col-md-3" style="position:fixed; top: 0; right: 0;"></div>

【讨论】：

问题是我在容器和 .row 中使用它。使用 top/right: 0 将其推到显示角落..