[英]bootstrap Carousel 100% width
嘗試了很多事情,但無法正確解決,我希望輪播系統拉伸到屏幕大小,而屏幕左右兩邊沒有空白。是的,可能有類似的帖子,我已經嘗試了很多事情,但是它不起作用,請解釋一下為什么會這樣
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" >
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1024x700/CC1111/FFF" alt="First Slide">
<div class="carousel-caption">
First Slide
</div>
</div>
<div class="item">
<img src="http://placehold.it/1024x700/449955/FFF" alt="Second Slide">
<div class="carousel-caption">
Second Slide
</div>
</div>
<div class="item">
<img src="http://placehold.it/1024x700/" alt="Third Slide">
<div class="carousel-caption">
Third Slide
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
#Container_Carousel{
margin:0;
padding:0;
width:100%;
}
.item img{
width:100%;
}
body{
margin:0;
padding:0;
}
html,body{height:100%;}
.carousel,.item,.active{height:100%;}
.carousel-inner{height:100%;}
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" >
正在添加填充。
您可以將一個類添加到列div中
<div class="no-padding col-lg-12 col-md-12 col-sm-12 col-xs-12" >
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1024x700/CC1111/FFF" alt="First Slide">
<div class="carousel-caption">
First Slide
</div>
</div>
<div class="item">
<img src="http://placehold.it/1024x700/449955/FFF" alt="Second Slide">
<div class="carousel-caption">
Second Slide
</div>
</div>
<div class="item">
<img src="http://placehold.it/1024x700/" alt="Third Slide">
<div class="carousel-caption">
Third Slide
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
然后將此類添加到您的CSS
.no-padding {
padding: 0;
}
我添加了一個類,是因為我不希望您從默認列類中刪除填充,因為您可能需要為其他結構填充。 我已經更新了演示
您不需要太多的CSS。
<div id="carousel">
<div class="rows">
<div class="carousel-contaier col-xs-12">
<!-- your carousel here -->
</div>
</div>
</div>
#carousel .carousel-container {
padding: 0;
}
並且由於Bootstrap 3是移動優先的,因此您不需要為所有視口使用網格類。 根據docs ,您只需要col-xs-12
。
網格類別適用於屏幕寬度大於或等於斷點大小的設備 ,並覆蓋針對較小設備的網格類別 。 因此,在應用任何
.col-md-
類的元素不僅會影響上平台裝置,而且在大的器件它的造型如果.col-lg-
類不存在。
這也將使代碼更整潔。
這是JSFiddle上的演示。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.