Bootstrap 2列固定-可滚动

wydwbb8l 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(177)

我有2列，我需要第一个是固定的，其中第二个有一个很长的列表，需要滚动。

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

但这会让人React迟钝。
@Edu Lomeli指出，作为Bootstrap文档的Affix Js：
右边的子导航是一个附加插件的现场演示。
这正是我想要的行为。问题是我不完全理解它。

twitter-bootstrap

来源：https://stackoverflow.com/questions/22125127/2-columns-with-fixed-scrollable

2条答案

按热度按时间

zxlwwiss1#

通过将Col-md-3向左移动，使用Affix JS修复了该问题

<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

赞(0）回复(0）举报 2022-12-07

jm81lzqq2#

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

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

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 2列固定-可滚动

2条答案

相关问题

热门标签

最新问答