css - bootstrap container-fluid carousel

Question

我很惊讶我认为使用 container-fluid 会给我一个全宽的旋转木马，但事实并非如此。它的左右填充为 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>

Answer 1

在类 slick-carousel 旁边添加类行。

这解决了问题。

一些解释: .container-fluid 除了水平自动边距外，还在左右两侧添加了 15px 的内边距。