猫头鹰轮播无法正常使用引导程序

Question

我有问题。 我尝试使用owl carousel，但无法使其工作，它显示内容（列不正确）

问题类似于Bootstrap width displays incorreclty with Owl carousel

但添加owl-item类无效

这是我的代码示例

  <div class="container section__content">
            <div class="row feedback-list">
                <div id="feedback-slider" class="feedback-list__wrapper">
                    <div class="feedback-list__item col-md-4">
                        <div class="feedback-item">
                            <div class="feedback-header feedback-item__header">
                                <img class="feedback-header__image" src="img/customer-andrew.png" alt="">
                                <p class="feedback-header__name">
                                    John, Doe
                                </p>
                            </div>
                            <p class="feedback-item__content">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium assumenda, cum
                                ipsum quaerat quod saepe sed totam voluptatem! Accusantium amet beatae consequuntur id
                                minus officia placeat, reiciendis rerum temporibus veniam! </p>
                            <div class="feedback-item__figure">
                                <img src="img/icon-quote.png" alt="" class="feedback-item__quote-image">
                            </div>
                        </div>
                    </div>

                    <div class="feedback-list__item col-md-4">
                        <div class="feedback-item">
                            <div class="feedback-header feedback-item__header">
                                <img class="feedback-header__image" src="img/customer-andrew.png" alt="">
                                <p class="feedback-header__name">
                                    John, Doe
                                </p>
                            </div>
                            <p class="feedback-item__content">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium assumenda, cum
                                ipsum quaerat quod saepe sed totam voluptatem! Accusantium amet beatae consequuntur id
                                minus officia placeat, reiciendis rerum temporibus veniam! </p>
                            <div class="feedback-item__figure">
                                <img src="img/icon-quote.png" alt="" class="feedback-item__quote-image">
                            </div>
                        </div>
                    </div>

                    <div class="feedback-list__item col-md-4">
                        <div class="feedback-item">
                            <div class="feedback-header feedback-item__header">
                                <img class="feedback-header__image" src="img/customer-andrew.png" alt="">
                                <p class="feedback-header__name">
                                    John, Doe
                                </p>
                            </div>
                            <p class="feedback-item__content">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium assumenda, cum
                                ipsum quaerat quod saepe sed totam voluptatem! Accusantium amet beatae consequuntur id
                                minus officia placeat, reiciendis rerum temporibus veniam! </p>
                            <div class="feedback-item__figure">
                                <img src="img/icon-quote.png" alt="" class="feedback-item__quote-image">
                            </div>
                        </div>
                    </div>
                    <div class="feedback-list__item col-md-4">
                        <div class="feedback-item">
                            <div class="feedback-header feedback-item__header">
                                <img class="feedback-header__image" src="img/customer-andrew.png" alt="">
                                <p class="feedback-header__name">
                                    John, Doe
                                </p>
                            </div>
                            <p class="feedback-item__content">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium assumenda, cum
                                ipsum quaerat quod saepe sed totam voluptatem! Accusantium amet beatae consequuntur id
                                minus officia placeat, reiciendis rerum temporibus veniam! </p>
                            <div class="feedback-item__figure">
                                <img src="img/icon-quote.png" alt="" class="feedback-item__quote-image">
                            </div>
                        </div>
                    </div>
                    <div class="feedback-list__item col-md-4">
                        <div class="feedback-item">
                            <div class="feedback-header feedback-item__header">
                                <img class="feedback-header__image" src="img/customer-andrew.png" alt="">
                                <p class="feedback-header__name">
                                    John, Doe
                                </p>
                            </div>
                            <p class="feedback-item__content">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium assumenda, cum
                                ipsum quaerat quod saepe sed totam voluptatem! Accusantium amet beatae consequuntur id
                                minus officia placeat, reiciendis rerum temporibus veniam! </p>
                            <div class="feedback-item__figure">
                                <img src="img/icon-quote.png" alt="" class="feedback-item__quote-image">
                            </div>
                        </div>
                    </div>
                    <div class="feedback-list__item col-md-4">
                        <div class="feedback-item">
                            <div class="feedback-header feedback-item__header">
                                <img class="feedback-header__image" src="img/customer-andrew.png" alt="">
                                <p class="feedback-header__name">
                                    John, Doe
                                </p>
                            </div>
                            <p class="feedback-item__content">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium assumenda, cum
                                ipsum quaerat quod saepe sed totam voluptatem! Accusantium amet beatae consequuntur id
                                minus officia placeat, reiciendis rerum temporibus veniam! </p>
                            <div class="feedback-item__figure">
                                <img src="img/icon-quote.png" alt="" class="feedback-item__quote-image">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

和JS

 $("#feedback-slider").owlCarousel({
        loop: false,
        margin: 42,
        dots: false,
        nav: false,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 3
            },
            1000: {
                items: 3
            }
        }
    });

我得到了以下结果

我该如何解决这个问题？

感谢。

Answer 1

从col-md-4 feedback-list__item中移除div班级，它运作正常......