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;
}

最终目标是获得第一张照片中的结果。稍后，当屏幕为移动视图时，我将水平滚动更改为垂直滚动。

这是没有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

引导水平滚动显示垂直

1 个答案: