twitter-bootstrap bootstrap Carousel 100% 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24509708/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap Carousel 100% width
提问by codefreaK
Tried many things but just couldnt get it right i want the carousel to strech to screen size without white space on left and right side of the screen .Yes in there may similar posts and i have tried many a things but its not working and please explain why this is happenning
尝试了很多东西，但就是做对了为什么会这样
HTML
HTML
<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>
CSS
CSS
#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%;}
回答by Matt Burrow
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" >
is adding the padding.
正在添加填充。
回答by fahad.kazi
You can add a class to your columns div
您可以向列 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>
And then add this class to your css
然后将这个类添加到你的 css 中
.no-padding {
padding: 0;
}
I have added a class because I do not want you to remove padding from the default column classes as you might need padding for some other structure. I have updated the demo
我添加了一个类，因为我不希望您从默认列类中删除填充，因为您可能需要为某些其他结构填充。我已经更新了演示
回答by Ian Mustafa
You don't need so much CSS.
你不需要那么多 CSS。
HTML
HTML
<div id="carousel">
<div class="rows">
<div class="carousel-contaier col-xs-12">
<!-- your carousel here -->
</div>
</div>
</div>
CSS
CSS
#carousel .carousel-container {
padding: 0;
}
And since Bootstrap 3 is mobile-first, you don't need to use grid classes for all viewport. You only need col-xs-12, according to docs.
而且由于 Bootstrap 3 是移动优先的，您不需要为所有视口使用网格类。根据文档col-xs-12，您只需要。
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any
.col-md-class to an element will not only affect its styling on medium devices but also on large devicesif a.col-lg-class is not present.
网格类适用于屏幕宽度大于或等于断点大小的设备，并覆盖针对较小设备的网格类。因此，将任何
.col-md-类应用于元素不仅会影响其在中型设备上的样式，而且如果.col-lg-类不存在，也会影响大型设备。
This also would make the code much cleaner.
这也将使代码更清晰。
Here is the demo on JSFiddle.
这是JSFiddle上的演示。
