我有这个 div 容器,当有四个以上的元素(元素是带标题的图片)时,我想显示水平滚动。
问题是,当我将代码放在下面时,我得到了一个垂直滚动条,最后一项(四项之后的下一项)进入了新行。
这是 HTML:
<div class="col-xl-10 col-lg-12 col-md-12 col-sm-12 wrapper">
<div class="row scroll">
<div class="col-lg-3 col-md-3 col-sm-12 image-holder">
<div class="image-crop">
<img src="../../../../assets/fortress.jpg" class="img-fluid img-file"
alt="Responsive image of item">
<div class="shadow"></div>
</div>
<span class="image-text">Fortress</span>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 image-holder">
... SAME AS ABOVE x4...
</div>
</div>
</div>
这是 CSS:
.image-holder {
position: relative;
width: 100%; /* for IE 6 */
}
.image-text {
position: absolute;
top: 78%;
left: 33%;
text-align: center;
color: white;
font-size: 1.8rem;
}
.image-crop {
position: relative;
margin: 10px;
float: left;
-webkit-box-shadow: inset 0 -45px 45px -11px #000000;
-moz-box-shadow: inset 0 -45px 45px -11px #000000;
box-shadow: inset 0 -45px 45px -11px #000000;
}
.img-file {
display: block;
position: relative;
z-index: -1;
height: 270px;
width: 300px;
object-fit: cover;
}
/* horizontal scroll */
.wrapper {
position: relative;
width: 600px;
}
.scroll {
overflow-x: scroll;
overflow-y: scroll;
height: 250px;
white-space: normal;
}
最终目标是得到第一张图片中的结果。稍后我会在屏幕为移动 View 时将水平滚动更改为垂直。
这是没有 Bootstrap 的 StackBlitz:
https://stackblitz.com/edit/angular-xxuvdx?file=src%2Fapp%2Fapp.component.html
最佳答案
使用 Bootstrap 4 flex-nowrap
类..
<div class="row scroll flex-nowrap">
...
</div>
关于css - Bootstrap水平滚动显示垂直,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58818595/