Изготовление горизонтально складываемого контейнера - PullRequest
Новая
       4

Изготовление горизонтально складываемого контейнера

1 голос
/ 19 марта 2020

Я использую ng bootstrap и 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;
}

1 Ответ

0 голосов
/ 29 марта 2020

Привет, может быть, это может помочь, потому что у меня была эта проблема раньше, и я исправил ее, используя это решение и его использование bootstrap, что лучше в вашем случае

Горизонтально прокручиваемые элементы div в bootstrap строка

надеюсь, что это решение поможет вам, Cheers:)

...