Bootstrap Karussell Bild nicht in voller Breite angezeigt

Question

Ich erstelle a simple HTML template mit Bootstrap 3. Ich überprüfe die Vorlage in mittlerer Größe, es sieht gut aus. Aber wenn ich es in einer größeren Anzeige (und einer höheren Auflösung) überprüfe, sehe ich auf der rechten Seite der Bilder innerhalb des Karussells einen weißen Bereich.

Screenshot:

Mein Code für das Karussell:

<!-- Carousel 
================================================== --> 

<div class="clearfix"></div> 


    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"> 
     </li> 
     <li data-target="#myCarousel" data-slide-to="1"> 
     </li> 
     <li data-target="#myCarousel" data-slide-to="2"> 
     </li> 
     </ol> 
     <div class="carousel-inner"> 
     <div class="item active"> 
      <img src="img/4.jpg"> 
      <div class="container"> 
      <div class="carousel-caption"> 
       <h1> 
       Example headline. 
       </h1> 
       <p> 
       Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. 
       </p> 
       <p> 
       <a class="btn btn-lg btn-primary" href="#" role="button"> 
        Call to Action 
       </a> 
       </p> 
      </div> 
      </div> 
     </div> 
     <div class="item"> 
      <img src="img/5.jpg"> 
      <div class="container"> 
      <div class="carousel-caption"> 
       <h1> 
       Another example headline. 
       </h1> 
       <p> 
       Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. 
       </p> 
       <p> 
       <a class="btn btn-lg btn-primary" href="#" role="button"> 
        Register Now 
       </a> 
       </p> 
      </div> 
      </div> 
     </div> 
     <div class="item"> 
      <img src="img/6.jpg"> 
      <div class="container"> 
      <div class="carousel-caption"> 
       <h1> 
       One more for good measure. 
       </h1> 
       <p> 
       Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. 
       </p> 
       <p> 
       <a class="btn btn-lg btn-primary" href="#" role="button"> 
        Read Blog 
       </a> 
       </p> 
      </div> 
      </div> 
     </div> 
     </div> 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left"> 
     </span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right"> 
     </span> 
     </a> 
    </div> 
    <!-- end #mycarousel --> 

Wie dieses Problem zu beheben?

Ich habe versucht, Container-Klasse vor der Karussell-Klasse einzufügen, aber das gibt mir keine volle Breite Karussell. Ich möchte das Karussell in voller Breite, nicht in Containerklassenbreite verpackt.

Answer 1

in Ihrem CSS

.carousel-inner>.item>img, .carousel-inner>.item>a>img { 
display: block; 
height: auto; 
max-width: 100%; 
line-height: 1; 
width: 100%; // Add this 
} 

Answer 2

Dies liegt daran, Bootstrap nicht Crousel Inhalt nicht ausrichten

zum Zentrum haben Sie 2 Möglichkeiten

1. Nehmen Sie Änderungen in CSS und ausrichten Zentrum

.carousel-inner > .item > img, .carousel-inner > .item > a > img { 
    display: block; 
    height: auto; 
    line-height: 1; 
    margin: 0 auto; 
    max-width: 100%; 
} 

2. statt in div Verwendung Hintergrundbild wie

< div class = " Artikel " > < div style = " background-image: url (img/4.jpg); Höhe: 400px; Hintergrundgröße: enthalten; Rand: 0px automatisch; Breite: 95%; " > </div >
</div >

Answer 3

ich auch dieses Problem hatte. In meinem Fall war es, weil die Größe des ursprünglichen Bildes nicht groß genug war. Als ich die Größe des Bildes vergrößerte, passte es den vollen Bildschirm. Vielleicht möchten Sie das ausprobieren!