我只希望网站col-md-6的中心部分在诸如Facebook这样的中等屏幕上滚动。我如何做到这一点？ jsfiddle中的sidebar one和sidebar two应该保持固定。我的fiddle
答案 0 :(得分：1)
您可以通过使用CSS position属性来实现
.content {
position: relative;
}
.side1,
.side2 {
position: -webkit-sticky!important;
position: sticky!important;
top: 0;
word-break: break-all;
}<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<!-- ADD THE CLASS layout-top-nav TO REMOVE THE SIDEBAR. -->
<body class="hold-transition skin-black-light layout-top-nav">
<div class="wrapper">
<header class="main-header">
<nav class="navbar navbar-static-top">
<div class="container">
<div class="navbar-header">
<a href="../../index2.html" class="navbar-brand">Tester</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<i class="fa fa-bars"></i>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" id="navbar-search-input" placeholder="Search">
</div>
</form>
</div>
</div>
<!-- /.container-fluid -->
</nav>
</header>
<!-- Full Width Column -->
<div class="content-wrapper">
<div class="container">
<!-- Content Header (Page header) -->
<section class="content-header"></section>
<section class="content">
<div class="row">
<div class="col-xs-3 side1">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">side bar one</h3>
</div>
<div class="box-body">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>
</div>
</div>
</div>
<div class="col-xs-6 main1 ">
<div class="box box-widget">
<div class="box-body">
<!-- post text -->
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>
<p>the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
</div>
<div class="box-body">
<!-- post text -->
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>
<p>the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
</div>
<div class="box-body">
<!-- post text -->
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>
<p>the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
</div>
<div class="box-body">
<!-- post text -->
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>
<p>the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
</div>
<div class="box-body">
<!-- post text -->
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>
<p>the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
</div>
<div class="box-body">
<!-- post text -->
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>
<p>the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
</div>
<div class="box-body">
<!-- post text -->
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>
<p>the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
</div>
<div class="box-body">
<!-- post text -->
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>
<p>the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
</div>
<div class="box-body">
<!-- post text -->
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>
<p>the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
</div>
<div class="box-body">
<!-- post text -->
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>
<p>the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
</div>
</div>
</div>
<div class="col-xs-3 side2">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">side bar two</h3>
</div>
<div class="box-body">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at</p>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- /.container -->
</div>
</div>
</body>
</html>
答案 1 :(得分：1)
如果您在IE和旧版浏览器中遇到问题，请使用此JS代替“ position：sticky” CSS。 请在全视图下打开以下代码。
(function($) {
$.fn.sticky = function( options ) {
var settings = $.extend({
stickyTop : 0,
stickyBottom : 0,
widthLimit: 0,
stickyClass: false,
stickyParent: false
}, options);
return this.each( function() {
var $ele = $(this);
var eleTop, eleLeft, eleBottom, eleParBot, eleWid, winWid
var r = function(){
eleTop = $ele.offset().top - settings.stickyTop;
eleLeft = $ele.offset().left;
eleBottom = $ele.offset().top + $ele.innerHeight() + settings.stickyBottom;
$eleParent = $ele.parents(settings.stickyParent) || $ele.parent();
eleParBot = $eleParent.offset().top + $eleParent.innerHeight();
eleWid = $ele.innerWidth();
winWid = $(window).outerWidth();
f();
}
var f = function(){
var winTop = $(window).scrollTop();
if(winTop >= eleTop && winWid > settings.widthLimit){
$ele.css({
'position': 'fixed',
'top': settings.stickyTop,
'left': eleLeft,
'width': eleWid
});
if (settings.stickyClass != false) {
$ele.addClass(settings.stickyClass);
}
if(winTop >= eleParBot-$ele.innerHeight()-settings.stickyTop+settings.stickyBottom){
$ele.css('top', (winTop - eleParBot + $ele.innerHeight() - settings.stickyBottom) * -1);
}
else{
$ele.css('top', settings.stickyTop);
}
}
else{
$ele.removeAttr('style').removeClass(settings.stickyClass);
}
}
r();
$(window).scroll(f);
$(window).resize(function(){
$ele.removeAttr('style');
r();
});
});
}
}(jQuery));
$(document).ready(function() {
$('.sidebar1').sticky({
stickyClass: 'sticky',
widthLimit: 767
});
$('.sidebar2').sticky({
stickyTop: 50,
stickyBottom: -50,
stickyClass: 'sticky',
widthLimit: 767
});
$('.sidebar3').sticky({
stickyTop: 50,
stickyBottom: 70,
stickyClass: 'sticky',
widthLimit: 767
});
$('.sidebar4').sticky({
stickyTop: 0,
stickyBottom: 70,
stickyClass: 'sticky',
widthLimit: 767
});
$('.sidebar5').sticky({
stickyTop: 0,
stickyBottom: 0,
stickyClass: 'sticky',
widthLimit: 767,
stickyParent: '.parent-sticky'
});
});html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
width: 100%;
height: 100%;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h4 {
margin: 0;
padding: 0;
}
*, *:after, *:before{
box-sizing: border-box;
}
body {
font-family: 'Work Sans', serif;
background-color: #fff;
padding: 50px 0;
-webkit-font-smoothing: antialiased;
background: #DD5E89;
background: -webkit-linear-gradient(to right, #F7BB97, #DD5E89);
background: linear-gradient(to right, #F7BB97, #DD5E89);
}
.container{
max-width: 960px;
width: 100%;
padding: 0 15px;
margin: auto;
}
.title{
position: relative;
padding-bottom: 20px;
margin-bottom: 35px;
}
.title:after{
content: '';
width: 50px;
height: 4px;
background: #fff;
position: absolute;
left: 0;
bottom: 0;
}
.main-title .title{
margin-bottom: 60px;
}
.main-title .title:after{
margin: auto;
right: 0;
width: 100px;
}
h1{
font-family: 'Ubuntu', sans-serif;
font-size: 55px;
color: #fff;
font-weight: 500;
text-align: center;
}
h2{
font-family: 'Ubuntu', sans-serif;
font-size: 40px;
}
h4{
font-family: 'Ubuntu', sans-serif;
font-size: 25px;
font-weight: 500;
color: #1d1d1d;
padding-bottom: 15px;
}
.content-wrap{
padding: 25px 25px 40px;
background-color: #8647db;
border-radius: 4px;
color: #fff;
}
.text-wrap p{
line-height: 26px;
font-weight: 300;
letter-spacing: 0.1em;
}
.btn-wrap{
padding-top: 25px;
}
.btn-wrap a{
font-size: 18px;
line-height: 24px;
padding: 10px 20px;
color: #6231a6;
font-weight: 500;
background-color: #fff;
border-radius: 3px;
display: inline-block;
}
.sidebar{
background: #fff;
padding: 25px;
border-radius: 4px;
overflow-x: hidden;
}
.sidebar ul{
padding: 0;
margin: 0;
list-style-type: none;
}
.my-list li{
font-size: 14px;
line-height: 24px;
color: #fff;
background-color: #6231a6;
padding: 8px 20px;
margin-bottom: 10px;
border-radius: 3px;
-webkit-transform: translate(150%, 0px);
-moz-transform: translate(150%, 0px);
-o-transform: translate(150%, 0px);
-ms-transform: translate(150%, 0px);
transform: translate(150%, 0px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.my-list li:last-child{
margin-bottom: 0;
}
.my-list.rev li{
-webkit-transform: translate(-150%, 0px);
-moz-transform: translate(-150%, 0px);
-o-transform: translate(-150%, 0px);
-ms-transform: translate(-150%, 0px);
transform: translate(-150%, 0px);
}
.my-list li:nth-child(1){
transition-delay: 0.05s;
}
.my-list li:nth-child(2){
transition-delay: 0.1s;
}
.my-list li:nth-child(3){
transition-delay: 0.15s;
}
.my-list li:nth-child(4){
transition-delay: 0.2s;
}
.sidebar.sticky .my-list li{
-webkit-transform: translate(0%, 0px);
-moz-transform: translate(0%, 0px);
-o-transform: translate(0%, 0px);
-ms-transform: translate(0%, 0px);
transform: translate(0%, 0px);
}
.tags{
padding-bottom: 15px;
}
ul.tags-wrap{
margin-left: -3px;
margin-right: -3px;
}
.tags-wrap li{
font-size: 12px;
line-height: 16px;
color: #fff;
border-radius: 3px;
background-color: #36a631;
padding: 5px 8px;
margin: 3px;
}
.tags-wrap li.red{
background-color: #de2342;
}
.main-container{
margin-bottom: 70px;
}
.parent-sticky > .container{
margin-bottom: 70px;
}
.parent-sticky > .container:last-child{
margin-bottom: 0;
}
@media(max-width: 1024px){
.sidebar.sidebar1 .my-list li,
.sidebar.sidebar1 .my-list.rev li{
-webkit-transform: translate(0%, 0px);
-moz-transform: translate(0%, 0px);
-o-transform: translate(0%, 0px);
-ms-transform: translate(0%, 0px);
transform: translate(0%, 0px);
}
}
@media(max-width: 991px){
.sidebar.sidebar2 .my-list li,
.sidebar.sidebar2 .my-list.rev li{
-webkit-transform: translate(0%, 0px);
-moz-transform: translate(0%, 0px);
-o-transform: translate(0%, 0px);
-ms-transform: translate(0%, 0px);
transform: translate(0%, 0px);
}
}
@media(max-width: 767px){
h1{
font-size: 50px;
}
.sidebar{
margin-top: 25px;
}
.sidebar .my-list li,
.sidebar .my-list.rev li{
-webkit-transform: translate(0%, 0px);
-moz-transform: translate(0%, 0px);
-o-transform: translate(0%, 0px);
-ms-transform: translate(0%, 0px);
transform: translate(0%, 0px);
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main-container">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="content-wrap">
<div class="title">
<h2>Lorem Ipsum</h2>
</div>
<div class="text-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
</div>
<div class="btn-wrap">
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="sidebar sidebar1">
<div class="tags">
<h4>Sticky Properties</h4>
<ul class="tags-wrap d-flex flex-wrap">
<li>Top : 0</li>
<li>Bottom : 0</li>
<li>WidthLimit : 1024px</li>
<li>StickyClass : sticky</li>
</ul>
</div>
<ul class="my-list">
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="main-container">
<div class="container">
<div class="row flex-row-reverse">
<div class="col-md-8">
<div class="content-wrap">
<div class="title">
<h2>Lorem Ipsum</h2>
</div>
<div class="text-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
</div>
<div class="btn-wrap">
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="sidebar sidebar2">
<div class="tags">
<h4>Sticky Properties</h4>
<ul class="tags-wrap d-flex flex-wrap">
<li>Top : 50</li>
<li>Bottom : 50</li>
<li>WidthLimit : 991px</li>
<li>StickyClass : sticky</li>
</ul>
</div>
<ul class="my-list rev">
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="main-container">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="content-wrap">
<div class="title">
<h2>Lorem Ipsum</h2>
</div>
<div class="text-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
</div>
<div class="btn-wrap">
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="sidebar sidebar3">
<div class="tags">
<h4>Sticky Properties</h4>
<ul class="tags-wrap d-flex flex-wrap">
<li>Top : 50</li>
<li class="red">Bottom : -70</li>
<li>WidthLimit : 767px</li>
<li>StickyClass : sticky</li>
</ul>
</div>
<ul class="my-list">
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="main-container">
<div class="container">
<div class="row flex-row-reverse">
<div class="col-md-8">
<div class="content-wrap">
<div class="title">
<h2>Lorem Ipsum</h2>
</div>
<div class="text-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
</div>
<div class="btn-wrap">
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="sidebar sidebar4">
<div class="tags">
<h4>Sticky Properties</h4>
<ul class="tags-wrap d-flex flex-wrap">
<li>Top : 0</li>
<li class="red">Bottom : -70</li>
<li>WidthLimit : 767px</li>
<li>StickyClass : sticky</li>
</ul>
</div>
<ul class="my-list rev">
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="main-container parent-sticky">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="content-wrap">
<div class="title">
<h2>Lorem Ipsum</h2>
</div>
<div class="text-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
</div>
<div class="btn-wrap">
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="sidebar sidebar5">
<div class="tags">
<h4>Sticky Properties</h4>
<ul class="tags-wrap d-flex flex-wrap">
<li>Top : 50</li>
<li>Bottom : 0</li>
<li>WidthLimit : 767px</li>
<li>StickyClass : sticky</li>
<li>StickyParent : '.parent-sticky'</li>
</ul>
</div>
<ul class="my-list">
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="content-wrap">
<div class="title">
<h2>Lorem Ipsum</h2>
</div>
<div class="text-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
</div>
<div class="btn-wrap">
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
<div class="main-container">
<div class="container">
<div class="content-wrap">
<div class="title">
<h2>Lorem Ipsum</h2>
</div>
<div class="text-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</p>
</div>
<div class="btn-wrap">
<a href="#">Read More</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>