添加
col-4
类而不是col-md-4。对于屏幕的所有分辨率,这将使DIV的宽度保持在33.3%。
html, body {
padding: 0;
margin: 0;
height: 100%;
}
.page-wrapper {
min-height: 100%;
}
.hero {
height: 100vh;
background: #212121;
justify-content: center;
align-items: center;
}
#carousel {
list-style-type: none;
margin: 0;
padding: 0;
overflow-x: scroll;
justify-content: left;
align-items: center;
}
#carousel li {
padding: 0 0 70px 0;
}
#carousel li a {
text-decoration: none;
color: #fff;
}
#carousel li img {
display: block;
width: 100%;
}
#carousel li .caption {
padding-top: 20px;
}
#carousel li h2 {
font-size: 20px;
line-height: 1;
margin: 0;
padding: 0;
}
#carousel li p {
font-size: 10px;
padding: 0;
margin: 5px 0 0 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-wrapper">
<div class="hero d-flex">
<ul id="carousel" class="d-flex">
<li class="col-4">
<a href="#"><img src="https://placeimg.com/300/200/people" alt="">
<div class="caption">
<h2>Lorem ipsum dolor</h2>
<p>A true story</p>
</div>
</a>
</li>
<li class="col-4">
<a href="#"><img src="https://placeimg.com/300/200/nature" alt="">
<div class="caption">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
</a>
</li>
<li class="col-4">
<a href="#"><img src="https://placeimg.com/300/200/arch" alt="">
<div class="caption">
<h2>My neighborhood</h2>
<p>Lorm ipsum dolor</p>
</div>
</a>
</li>
<li class="col-4">
<a href="#"><img src="https://placeimg.com/300/200/animals" alt="">
<div class="caption">
<h2>Into the wild</h2>
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
</a>
</li>
</ul>
</div>
</div>
编辑
评论中的问题(工作答案中未更新)
试试这个HTML标记,它应该按您的预期工作。
<div class="hero container-fluid">
<ul id="carousel" class="row">
<li class="col-12 col-sm-6 col-md-4">
<a href="#"><img src="https://placeimg.com/300/200/people" alt="">
<div class="caption">
<h2>Lorem ipsum dolor</h2>
<p>A true story</p>
</div>
</a>
</li>
<li class="col-12 col-sm-6 col-md-4">
<a href="#"><img src="https://placeimg.com/300/200/nature" alt="">
<div class="caption">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
</a>
</li>
<li class="col-12 col-sm-6 col-md-4">
<a href="#"><img src="https://placeimg.com/300/200/arch" alt="">
<div class="caption">
<h2>My neighborhood</h2>
<p>Lorm ipsum dolor</p>
</div>
</a>
</li>
<li class="col-12 col-sm-6 col-md-4">
<a href="#"><img src="https://placeimg.com/300/200/animals" alt="">
<div class="caption">
<h2>Into the wild</h2>
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
</a>
</li>
</ul>
</div>