Owl Carousel 2 使用 Bootstrap 4 显示不正确的宽度

Question

我有一些带有 Bootstrap 标记的 HTML：

<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 时它可以正常工作，但是当我添加这个滑块时，它会破坏侧边栏。

谁能告诉我，我的代码有什么问题？

谢谢

Answer 1

.owl-carousel .owl-stage-outer {
    width: 100%;
    margin: 0 ;
}