Carousel image doesn't fill the width in bootstrap 3

问题

I'm soooooo new at this responsive stuff. I'm trying to use the carousel from the new bootstrap 3 and for some reason, the image does not fill the width of the carousel. All the images are the same exact size (1000x395) and no matter what i do, it doesn't fill all the way. Any and all help is greatly appreciated!!! Here's the code i'm using and a 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 -->

回答1:

Add width="100%" to each img line: <img src="/images/temp/2.jpg" width="100%"> It will increase the height proportionally to maintain the aspect ratio.

回答2:

.img-responsive set the image to max 100% of it's original size. Your class="col-md-12" is 1200 px in the large grid. You need bigger images >= 1200px or make your sites smaller.

Add the media query below after Bootstrap's css will ste the max-width of your site to 940px;

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

来源：https://stackoverflow.com/questions/18638276/carousel-image-doesnt-fill-the-width-in-bootstrap-3