5

我对这种响应式的东西很陌生。我正在尝试使用新引导程序 3 中的轮播，由于某种原因，图像没有填满轮播的宽度。所有图像的尺寸完全相同（1000x395），无论我做什么，它都不会完全填满。非常感谢任何和所有帮助！这是我正在使用的代码和屏幕截图：

<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 -->

非全宽图像

4

2 回答 2

10

添加width="100%"到每个 img 行： <img src="/images/temp/2.jpg" width="100%"> 它将按比例增加高度以保持纵横比。

于 2013-12-06T20:01:11.260 回答
1

.img-responsive将图像设置为其原始大小的最大 100%。您class="col-md-12"在大网格中是 1200 像素。您需要更大的图像 >= 1200 像素或使您的网站更小。

在 Bootstrap 的 css 将您网站的最大宽度设置为 940px 之后添加下面的媒体查询；

@media (min-width: 1200px) {
  .container {
    width: 940px;
  }
于 2013-09-05T17:42:32.397 回答