Сова Карусель 2 отображает неправильную ширину с Bootstrap 4 - PullRequest
Новая
       30

Сова Карусель 2 отображает неправильную ширину с Bootstrap 4

0 голосов
/ 28 февраля 2019

У меня есть HTML-код с разметкой Bootstrap ниже: 

<div class="container">
    <div class="row">
        <div class="col-lg">
            <div class="row">
                <div class="grid-container">
                    <div class="grid-item">1</div>
                    <div class="grid-item">2</div>
                    <div class="grid-item">8</div>
                    <div class="grid-item">9</div>
                    <div class="grid-item d-none d-sm-block">10</div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="owl-carousel owl-theme">
                        <div class="row item"><h4>1</h4></div>
                        <div class="row item"><h4>2</h4></div>
                        <div class="row item"><h4>3</h4></div>
                        <div class="row item"><h4>4</h4></div>
                        <div class="row item"><h4>5</h4></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg sidebar border">
            <div>Sidebar</div>
        </div>
    </div>
</div>

<script>
$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
});
</script>


        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto;
            justify-content: space-between;
            grid-gap: 10px;
            margin: 0 auto;
        }
        .grid-item {
            width: 100px;
            height: 100px;
            border: 1px solid #efefef;
            border-radius: 5px;
        }
        .sidebar {
                max-width: 100%;
        }

        @media (min-width: 576px) {
            .grid-container {
                display: grid;
                grid-template-columns: auto auto auto auto auto;
                justify-content: space-between;
                grid-gap: 10px;
                margin: 0 auto;
            }

        }

        @media (min-width: 992px) {
            .sidebar {
                max-width: 320px;
            }
        }

Левая сторона - это основной контент, правая сторона - боковая панель, она отлично работает без Owl Carousel 2, но когда я добавляю этот слайдер, он ломает боковую панель вниз.

enter image description here

Кто может мне сказать, что я не так с этим кодом?

Спасибо

...