【问题标题】：Carousel slick.js + bootstrap column width issueCarousel slick.js + bootstrap 列宽问题
【发布时间】：2015-01-30 10:07:09
【问题描述】：

我有这个网页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>

轮播在 testimonial-wrapper 上初始化的地方

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

谁能帮我解决这个问题并解释我缺少什么... :-/

谢谢！

【问题讨论】：

对滑块使用普通的div > div 结构（无引导类），然后将.rows 和.columns 放入其中，不要尝试使用bootstrap .. 如果您需要将滑块包装在 .col-md-4 中然后包装它，请不要尝试将类应用于滑块本身。

标签： javascript html css twitter-bootstrap

【解决方案1】：

我在引导列中遇到了类似的问题。我只是添加了一些填充。

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

【讨论】：

【解决方案2】：

因为.testimonial_wrapper 是您要在其上初始化光滑函数的元素，并且您只是说要显示一张幻灯片：slidesToShow: 1，所以类col-md-4 的幻灯片将继承@ 的整个宽度987654325@ 元素，因为您选择了slidesToShow: 1。

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

我会提出以下两件事之一：

如果您希望滑块只有一张并占用col-md-4 列的大小，则将col-md-4 类添加到.testimonial_wrapper 元素。

或者

您可以通过在调用 slick 函数/初始化滑块时声明该属性来一次播放 3 张幻灯片（模仿滑块中的 col-md-4 类）：slidesToShow: 3

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

【讨论】：