我建议两件事之一：

Question

我正在使用此网页http://staging.karlienfabre.be/pocoloco/reizen/canyoning.html

我在黄色区块里有推荐信。我想要一份推荐信的旋转木马;但正如你在第二个黄色区块中看到的那样，我有宽度问题。它应该是col-md-4的旋转木马;但它正在变得更大。

我也在主页上使用了旋转木马;安德那里一切都很好。 http://staging.karlienfabre.be/pocoloco/（在页面下方，订阅新闻通讯订阅）

我已经在html中尝试了很多构造;但找不到合适的或缺失的部分。

目前这是建筑。

        <section class="row yellow">
        <div class="border-top">
            <div class="container">
                <img src="../img/border_top.png"/>
            </div>
        </div>
        <div class="container yellow-content">
            <div class="row center-vertical">
                <div class="col-md-8 vertical-center-element vertical-centered-text">
                    <h2>Actie en avontuur</h2>
                    <p>
                        540 smith grind grind hang up launch ramp. Sponsored gnarly no comply regular footed hang-up. Quarter pipe tic-tac aerial hang ten airwalk. Deck baseplate crail grab bluntslide regular footed. Varial carve darkslide ollie hole Vans Calfornia Daze rocket air. Pivot kick-nose ollie sketchy death box Steve Rocco.
                    </p>
                </div>
                <div class="testimonial_wrapper">
                    <div class="col-md-4  vertical-center-element">
                        <div class="testimonail_container">
                            <div class="row">
                                <div class="col-md-12  bgwhite">
                                    <div class="row text-center">
                                        <div class="col-md-6 col-md-offset-3">
                                            <div class="text-center testimonial">
                                                <img class="img-circle img-responsive" src="../img/reisaanbod/testimonials/testi_canyoning.jpg" alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row text-center">
                                        <div class="row-md-9">
                                                <p>Tic-tac nollie bearings Ron Allen disaster. Downhill blunt no comply Kevin Jarvis slob air. Deck Brooklyn Banks indy grab slap maxwell pop shove-it.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4  vertical-center-element">
                        <div class="testimonail_container">
                            <div class="row">
                                <div class="col-md-12  bgwhite">
                                    <div class="row text-center">
                                        <div class="col-md-6 col-md-offset-3">
                                            <div class="text-center testimonial">
                                                <img class="img-circle img-responsive" src="../img/reisaanbod/testimonials/testi_canyoning.jpg" alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row text-center">
                                        <div class="row-md-9">
                                                <p>Tic-tac nollie bearings Ron Allen disaster. Downhill blunt no comply Kevin Jarvis slob air. Deck Brooklyn Banks indy grab slap maxwell pop shove-it.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="border-bottom">
                <div class="container">
                    <img src="../img/border_bottom.png"/>
                </div>
            </div>

    </section>

在cartimonial-wrapper

上初始化轮播

        <script>
        //testimonial slider
        $('.testimonial_wrapper').slick({
          infinite: false,
          slidesToShow: 1,
          slidesToScroll: 1
        });
    </script>

任何人都可以帮我解决这个问题并解释我错过的内容......：/ /

THX！

Answer 1

由于.testimonial_wrapper是您正在初始化光滑功能的元素，并且您只是说要显示一张带有slidesToShow: 1的幻灯片，因此幻灯片中包含{{1} }}将继承col-md-4元素的整个宽度，因为您选择了.testimonial_wrapper。

本质上，SlickJS使用javascript处理所有内容，这将覆盖Bootstraps CSS设置。

我建议两件事之一：

如果您希望滑块有一张幻灯片并占用slidesToShow: 1列的大小，请将col-md-4类添加到col-md-4元素。

或者

您可以通过在调用光滑功能/初始化滑块时声明该属性来一次幻灯片放映3幻灯片（模仿滑块内的.testimonial_wrapper类）：col-md-4

除此之外^ - 如果您对滑块的响应断点感兴趣，Slick也有办法处理它。您可以查看their documentation的响应断点设置。

Answer 2

我在bootstrap专栏中遇到了类似的问题。我刚刚添加了一些填充。

.bootstrap-column { padding: 0 35px;}

Carousel slick.js + bootstrap列宽问题

2 个答案:

我建议两件事之一：

或者