0

我有 2Columns我需要第一个是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">

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

编辑

因此,感谢指出Affix Js的@Edu Lomeli 。作为引导文档:

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

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

4

2 回答 2

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

于 2014-03-02T09:15:57.527 回答
0

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

<div class="col-md-3" style="position:fixed; top: 0; right: 0;"></div>
于 2014-03-02T07:55:04.603 回答