Question

我安静地惊讶我认为使用容器 - 液体会给我一个全宽度的旋转木马，但它没有。它有一个左右15磅的填充，所以我添加了一个新的类删除填充，以便没有填充，但它没有工作。有没有填充的旋转木马的想法？

＆＃13;

$(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>'
                             });
});

＆＃13;

.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;}

＆＃13;

<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>

＆＃13;

Answer 1

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

这解决了问题。

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

Answer 2

您只需删除html中的.container > .row > .col-sm-12即可使用div。

引导容器 - 流体转盘

2 个答案: