Question

我有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。作为Bootstrap文档：

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

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

Answer 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>

看看-----＆gt; Bootply

Answer 2

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

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

2个固定列 - 可滚动

修改

2 个答案: