Obraz karuzeli nie wypełnia szerokości w bootstrapie 3

Question

Jestem taki nowy w tym responsywnym przedmiocie. Próbuję użyć karuzeli z nowego paska startowego 3 i z jakiegoś powodu obraz nie wypełnia szerokości karuzeli. Wszystkie obrazy mają ten sam dokładny rozmiar (1000x395) i bez względu na to, co robię, nie wypełniają się całkowicie. Wszelka pomoc mile widziana!!! Oto kod używam i zrzut ekranu:

<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 ustawić obraz do max 100% to oryginalny rozmiar. Twoja class="col-md-12" ma 1200 px w dużej sieci. Potrzebujesz większych zdjęć> = 1200px lub zmniejszyć witryny.

Dodaj zapytanie o media poniżej, gdy css Bootstrap wyłączy maksymalną szerokość witryny do 940 pikseli;

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

Answer 2

Dodaj width="100%" do każdej linii IMG: <img src="/images/temp/2.jpg" width="100%"> To zwiększy wysokość proporcjonalnie do zachowania proporcji.