如何在Bootstrap 4中使左和右Grid变得粘滞并且中间的一个可滚动
我正在将Bootstrap 4用于网站主页。 我已经使用了3个网格，col-md-3，col-md-6，col-md-3。 我希望第一个和最后一个网格在Position上保持粘性，而在中间则可滚动。
<div class="col-lg-3 d-none d-md-block">
//want sticky on fixed left position
</div>
<div class="col-lg-6">
//all contents in middle scrollable
</div>
<div class="col-lg-3 d-none d-md-block">
//want sticky on fixed right position
</div>
3 个答案:
答案 0 :(得分：1)
在中间部分添加滚动条，而不是将fixed定位到2个元素，因为这会在响应中产生问题并产生额外的覆盖样式。
更新的HTML
<div class="col-lg-6">
<div class="fixed">
//all contents in middle scrollable
</div>
</div>
CSS
.fixed {
height: calc(100vh - 130px);// 130px is the extra space set it accordingly if you didn't find aligned divs
overflow: scroll;
}
答案 1 :(得分：0)
在您的列表组中添加一个自定义类，例如myStickyListGroup。
现在，按照我在下面的CSS代码中应用的方法，将CSS设置为该类。
，然后使用下面显示的JavaScript制作脚本来更新列表的top位置。
我希望这对您有用，并且我必须通知您，您必须根据页面中的要求对脚本条件进行更改。
$(window).on('scroll', function(){
var windowTop = $(window).scrollTop();
$('.myStickyListGroup').css({'top': windowTop});
});.myStickyListGroup{
position: absolute;
left: 15px;
right: 15px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Offline</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body style="background-color: #eceef4">
<div class="container" style="position:relative; margin-top:100px">
<div class="row">
<div class="col-lg-3 d-none d-lg-block">
<ul class="list-group myStickyListGroup shadow bg-white rounded">
<li class="list-group-item rounded">List Item 1</li>
<li class="list-group-item rounded">List Item 2</li>
<li class="list-group-item rounded">List Item 3</li>
<li class="list-group-item rounded">List Item 4</li>
<li class="list-group-item rounded">List Item 5</li>
</ul>
<hr class="d-sm-none">
</div>
<div class="col-lg-6">
<div class="card shadow bg-white rounded">
<div class="card-body">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="row justify-content-center">
<div id="mdb-lightbox-ui"></div>
<!-- <div class="mdb-lightbox"> -->
<figure class="col-4">
<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg" data-size="1600x1067">
<img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(145).jpg" class="img-fluid circle">
</a>
</figure>
<figure class="col-4">
<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150).jpg" data-size="1600x1067">
<img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(150).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-4">
<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152).jpg" data-size="1600x1067">
<img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(152).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-4">
<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(42).jpg" data-size="1600x1067">
<img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-4">
<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(151).jpg" data-size="1600x1067">
<img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(151).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-4">
<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40).jpg" data-size="1600x1067">
<img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(40).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-4">
<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(148).jpg" data-size="1600x1067">
<img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(148).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-4">
<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(147).jpg" data-size="1600x1067">
<img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-4">
<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(149).jpg" data-size="1600x1067">
<img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(149).jpg" class="img-fluid" />
</a>
</figure>
<!-- </div> -->
</div>
</div>
</div>
<div class="card shadow bg-white rounded">
<div class="card-body">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="row justify-content-center">
<div id="mdb-lightbox-ui"></div>
<!-- <div class="mdb-lightbox"> -->
<figure class="col-4">
<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg" data-size="1600x1067">
<img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(145).jpg" class="img-fluid circle">
</a>
</figure>
<figure class="col-4">
<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150).jpg" data-size="1600x1067">
<img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(150).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-4">
<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152).jpg" data-size="1600x1067">
<img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(152).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-4">
<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(42).jpg" data-size="1600x1067">
<img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-4">
<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(151).jpg" data-size="1600x1067">
<img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(151).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-4">
<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40).jpg" data-size="1600x1067">
<img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(40).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-4">
<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(148).jpg" data-size="1600x1067">
<img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(148).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-4">
<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(147).jpg" data-size="1600x1067">
<img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-4">
<a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(149).jpg" data-size="1600x1067">
<img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(149).jpg" class="img-fluid" />
</a>
</figure>
<!-- </div> -->
</div>
</div>
</div>
<hr class="d-sm-none">
</div>
<div class="col-lg-3 d-none d-lg-block">
<ul class="list-group myStickyListGroup shadow bg-white rounded">
<li class="list-group-item rounded">List Item 1</li>
<li class="list-group-item rounded">List Item 2</li>
<li class="list-group-item rounded">List Item 3</li>
<li class="list-group-item rounded">List Item 4</li>
<li class="list-group-item rounded">List Item 5</li>
</ul>
<hr class="d-sm-none">
</div>
</div>
</div>
</body>
</html>
答案 2 :(得分：0)
最简单的方法是使用Bootstrap sticky-top类。
<div class="container" style="position:relative; margin-top:100px">
<div class="row">
<div class="col-lg-3 d-none d-md-block">
<ul class="list-group shadow bg-white rounded sticky-top">
..
</ul>
<hr class="d-sm-none">
</div>
<div class="col-md-6">
<div class="card shadow bg-white rounded">
//
</div>
<hr class="d-sm-none">
</div>
<div class="col-md-3 d-none d-md-block">
<ul class="list-group shadow bg-white rounded sticky-top">
..
</ul>
<hr class="d-sm-none">
</div>
</div>
</div>
https://codeply.com/p/AUtPqy2GY2
EDIT
如果粘性项目上方还有其他内容（例如导航栏或标题），请相应地覆盖top类的sticky-top以抵消高度...
.sticky-top {
top: 100px; /* height of header */
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？