css - Bootstrap水平滚动显示垂直

Question

我有这个 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

Answer 1

使用 Bootstrap 4 flex-nowrap 类..

<div class="row scroll flex-nowrap">
...
</div>

https://www.codeply.com/p/mzQRwa2jip