0
我很安靜的驚喜我認爲使用容器流體會給我一個全寬的旋轉木馬，但它沒有。它有一個15px左右的填充，所以我添加了一個新的類刪除填充爲了沒有填充，但它沒有工作。 有沒有填充旋轉木馬的任何想法？bootstrap容器流體傳送帶
$(document).ready(function(){
\t $('.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>