Question

我正在使用ngbootstrap和angular，但我认为这里的问题更多是html / css问题。我想让一个容器横向滚动，但我发现有关它的线程很少，但是无法使其在我的情况下起作用... 这是我的代码 html：

        <div style="width: 100%; background-color: rgb(177, 177, 177);">
            <div class="container" >
                <div class="my-container">
                    <h1>Usługi</h1>
                    <p>Nasza firma posiada uprawnienia UDT w zakresie montażu i konserwacji urządzeń dźwigowych, w tym:</p>
                    <div class="col-12 horizonstall-scroll" style="margin-left: auto; margin-right: auto; padding: 0;">
                        <div class="row">
                            <div class="card-container d-flex justify-content-center" *ngFor="let item of items">
                                <div class="card my-card" style="width: 18rem;">
                                    <img class="card-img-top" src="{{item.smallImg}}" alt="lift">
                                    <div class="card-body">
                                        <h5 class="card-title">{{item.name}}</h5>
                                        <p class="card-text">{{item.shortDesc}}</p>
                                        <a class="btn btn-primary" (click)="openModal(item)" >Czytaj więcej</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

css：


.my-container {
    padding-left: 15px;
    padding-right: 15px;
    background-color: rgb(216, 209, 209);
    box-shadow: 0px 10px 25px 13px rgba(0,0,0,0.75);
}

.horizonstall-scroll > .row  {
    overflow-x: auto;
    white-space: nowrap;
}

.horizonstall-scroll > .row > .card-container {
    display: inline-block;
    float: none;
}

Answer 1

您好，这可能会有所帮助，因为我之前曾遇到过此问题，并使用此解决方案及其引导程序对其进行了修复，这在您的情况下更好

Horizontal scrollable div's in a bootstrap row

希望这个解决方案可以满足您的需求，干杯：）

制作水平可伸缩容器

1 个答案: