bootstrap-Karussell 100% Breite
Viele Dinge versucht, aber couldnt get it right, ich will das Karussell zur Dehnung der Display-Größe ohne Leerraum auf der linken und rechten Seite des Bildschirms .Ja möglicherweise gibt es ähnliche stellen und ich habe versucht, viele Dinge, aber seine nicht funktioniert, und erklären Sie bitte, warum dies geschieht jetzt
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
#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%;}
- Du meinst wie diese: JSFiddle?
- ja genau so
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie eine Klasse hinzufügen, um Ihre Spalten div
Und dann fügen Sie diese Klasse, um Ihre css -
Ich habe eine Klasse, weil ich nicht wollen, Sie zu entfernen, Polsterung aus der Spalte Standard-Klassen, wie Sie vielleicht brauchen, Polsterung für eine andere Struktur. Ich habe aktualisiert die demo
ist das hinzufügen der Polsterung.
Brauchen Sie auch nicht so viel CSS.
HTML
CSS
Und seit Bootstrap 3 ist mobile-first, Sie brauchen nicht zu verwenden, die grid-Klassen für alle Viewports. Sie müssen nur
col-xs-12
, laut docs.Diese auch machen würde der code viel sauberer.
Hier ist die demo auf JSFiddle.