Karussell Bild füllt nicht die Breite in Bootstrap 3

Question

Ich bin soooooo neu in diesem responsiven Zeug. Ich versuche, das Karussell aus dem neuen Bootstrap 3 zu verwenden, und aus irgendeinem Grund füllt das Bild nicht die Breite des Karussells. Alle Bilder haben die gleiche genaue Größe (1000x395) und egal, was ich mache, es füllt nicht den ganzen Weg. Jede und alle Hilfe wird sehr geschätzt !!! Hier ist der Code ich verwende und ein Screenshot:

<div class="row"> 
    <div class="col-md-12"> 

     <div id="carousel" class="carousel slide"> 
     <ol class="carousel-indicators"> 
      <li data-target="#carousel" data-slide-to="0" class="active"></li> 
      <li data-target="#carousel" data-slide-to="1"></li> 
      <li data-target="#carousel" data-slide-to="2"></li> 
      <li data-target="#carousel" data-slide-to="3"></li> 
      <li data-target="#carousel" data-slide-to="4"></li> 
      <li data-target="#carousel" data-slide-to="5"></li> 
      <li data-target="#carousel" data-slide-to="6"></li> 
      <li data-target="#carousel" data-slide-to="7"></li> 
      <li data-target="#carousel" data-slide-to="8"></li> 
      <li data-target="#carousel" data-slide-to="9"></li> 
     </ol> 

     <div class="carousel-inner"> 

      <div class="item active"> 
      <img src="/images/temp/1.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/2.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/3.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/4.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/5.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/6.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/7.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/8.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/9.jpg" class="img-responsive"> 
      </div> 
      <div class="item"> 
      <img src="/images/temp/10.jpg" class="img-responsive"> 
      </div> 

     </div> 

     <a class="left carousel-control" href="#carousel" data-slide="prev"> 
      <span class="icon-prev"></span> 
     </a> 
     <a class="right carousel-control" href="#carousel" data-slide="next"> 
      <span class="icon-next"></span> 
     </a> 
     </div> 

    </div> <!-- /col-md-12 --> 
</div> <!-- /row --> 

Answer 1

.img-responsive das Bild auf maximal 100% eingestellt von ihrer Originalgröße. Ihre class="col-md-12" ist 1200 px im großen Raster. Sie brauchen größere Bilder> = 1200px oder verkleinern Sie Ihre Seiten.

Fügen Sie die Medienabfrage hinzu, nachdem die CSS-Datei von Bootstrap die maximale Breite Ihrer Site auf 940px gesetzt hat;

@media (min-width: 1200px) { 
    .container { 
    width: 940px; 
    } 

Answer 2

hinzufügen width="100%" zu jeder img line: <img src="/images/temp/2.jpg" width="100%"> Es wird die Höhe steigt proportional das Seitenverhältnis beizubehalten.