自举容器流体转盘

索尼娅·马克洛夫（Sonia Maklouf）

我感到很惊讶，我以为使用容器流体会给我一个全宽度的旋转木马，但事实并非如此。它具有15 px左右的填充，所以我添加了一个新类remove-padding以便没有填充，但是它没有用。有没有传送带的旋转木马的想法吗？

$(document).ready(function(){
	$('.slick-carousel').slick({
    arrows:true,
    prevArrow:'<a class="slick-prev"><span class="glyphicon glyphicon-chevron-left"></span></a>',
    nextArrow:'<a class="slick-next"><span class="glyphicon glyphicon-chevron-right"></span></a>'
                             });
});

.slick-prev {
    left: 50px;
}
.slick-next {
    right: 50px;
}
.slick-prev, .slick-next {
    background: none;
    border: medium none;
    color: blue;
    cursor: pointer;
    display: block;
    font-size: 24px;
    height: 20px;
    line-height: 0;
    margin-top: -10px;
    outline: medium none;
    padding: 0;
    position: absolute;
    top: 50%;
    width: 20px;
}
.slick-prev:before {
    content: "";
}
.slick-next:before {
    content: "";
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: #fff; }


.slick-carousel h1{ position:absolute; top:40px; left:20%; color:#fff; }*/
.remove-padding {padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important;}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://sandbox.jsnegley.net/jquery/slick-carousel/slick.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://sandbox.jsnegley.net/jquery/slick-carousel/slick.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-12 pen">
      <div class="page-header">
        <h5>Slick Carousel</h5>
        <h1>Basic Carousel</h1>
        <ul class="technology">
        <li>Bootstrap <span class="label label-default">3.3.4</span></li>
        <li>jQuery <span class="label label-default">2.1.3</span></li>
        <li>
        <a href="https://github.com/kenwheeler/slick"><span class="glyphicon glyphicon-book"></span> Documentation</a>
        </li>
        </ul>
      </div>
    </div>
  </div>
<!-- /container --></div>

<div class="container-fluid remove-padding">
 
      <!-- START MOD -->
 <div class="slick-carousel">
   <div><img src="http://sandbox.jsnegley.net/pics/carousel-1.jpg" class="img-responsive">
     <h1>Title 1</h1>
   </div>
   <div><img src="http://sandbox.jsnegley.net/pics/carousel-2.jpg"  class="img-responsive">
   <h1>Very long crazy long mega long title</h1>
   </div>
   <div><img src="http://sandbox.jsnegley.net/pics/carousel-3.jpg"  class="img-responsive"><h1>Title Title title</h1></div>
</div>
      <!-- END MOD -->
</div> 
    
  
 <!-- /container --></div>
<div class="container"><div class="row">
      <div class="col-xs-4">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
                </div>
                <div class="col-xs-4">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
                </div>
                <div class="col-xs-4">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
                </div>
</div></div>

齐亚德·阿拉姆（Ziad Alame）

在“ slick-carousel”类旁边添加“ class”行。

这解决了问题。

一些说明： .container-fluid除了水平自动边距之外，还在左侧和右侧添加了15px的填充。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。