twitter-bootstrap Carousel slick.js + bootstrap 列宽问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28233459/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Carousel slick.js + bootstrap column width issue
提问by user3346696
I'm having this webpage http://staging.karlienfabre.be/pocoloco/reizen/canyoning.html
我有这个网页http://staging.karlienfabre.be/pocoloco/reizen/canyoning.html
Where I've a testimonial in the yellow block. I would like to have a carousel of testimonials; but as you can see in the second yellow block I'm having issues with the width. It should be a carousel of col-md-4 ; but it's making it way bigger.
我在黄色块中的推荐信。我想要一个旋转木马的推荐；但是正如您在第二个黄色块中看到的那样，我遇到了宽度问题。应该是 col-md-4 的轮播；但它使它变得更大。
I'v used the carousel at the homepage too; ander there everything is fine. http://staging.karlienfabre.be/pocoloco/(way down at the page, underneed newsletter subscription)
我也用过主页上的轮播；安德那里一切都很好。 http://staging.karlienfabre.be/pocoloco/（在页面下方，需要订阅时事通讯）
I've already tries a lot of constructions in html; but can't find the right one or the missing piece.
我已经在 html 中尝试了很多结构；但找不到合适的或丢失的部分。
currently this is the construction.
目前这是施工。
<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>
where the carousel is initialized on testimonial-wrapper
轮播在推荐包装上初始化的地方
<script>
//testimonial slider
$('.testimonial_wrapper').slick({
infinite: false,
slidesToShow: 1,
slidesToScroll: 1
});
</script>
Can anyone help me out with this one and explain what I'm missing... :-/
任何人都可以帮我解决这个问题并解释我所缺少的......：-/
Thx!
谢谢！
回答by Douglas Rosebank
I had a similar issue with slick in a bootstrap column. I just added some padding.
我在 bootstrap 列中遇到了类似的问题。我只是添加了一些填充。
.bootstrap-column { padding: 0 35px;}
回答by domdambrogia
Because .testimonial_wrapperis the element you're initializing the slick function on, and you're only saying to show one slide with: slidesToShow: 1, the slide with class col-md-4will inherit the entire width of the .testimonial_wrapperelement because you chose slidesToShow: 1.
因为.testimonial_wrapper是您在其上初始化 slick 功能的元素，并且您只是说用 : 显示一张幻灯片slidesToShow: 1，所以带有 class 的幻灯片col-md-4将继承.testimonial_wrapper元素的整个宽度，因为您选择了slidesToShow: 1.
By nature, SlickJS handles everything with javascript which will overwrite Bootstraps CSS settings.
本质上，SlickJS 使用 javascript 处理所有内容，这将覆盖 Bootstraps CSS 设置。
I would propose one of two things:
我会建议两件事之一：
If you want the slider to have one slide and take up the size of a col-md-4column then add a col-md-4class to the .testimonial_wrapperelement.
如果您希望滑块有一张幻灯片并占据一col-md-4列的大小，则col-md-4向.testimonial_wrapper元素添加一个类。
Or
或者
You can have the slide show 3 slides at once (mimicking a col-md-4class within in the slider) by declaring that property when calling the slick function/initializing the slider: slidesToShow: 3
col-md-4通过在调用 slick 函数/初始化滑块时声明该属性，您可以一次让幻灯片放映 3 张幻灯片（模仿滑块中的一个类）：slidesToShow: 3
In addition to this ^ - If you're interested in responsive breakpoints for your slider Slick has a way to handle that as well. You can look through their documentationfor the responsive breakpoints settings.
除此之外 ^ - 如果您对滑块的响应断点感兴趣，Slick 也有一种处理方法。您可以查看他们的文档以了解响应式断点设置。
