轮播图像未填充引导程序 3 中的宽度 [英] Carousel image doesn't fill the width in bootstrap 3

查看：59
本文介绍了轮播图像未填充引导程序 3 中的宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

<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 class="item"><img src="/images/temp/2.jpg" class="img-responsive">

<div class="item"><img src="/images/temp/3.jpg" class="img-responsive">

<div class="item"><img src="/images/temp/4.jpg" class="img-responsive">

<div class="item"><img src="/images/temp/5.jpg" class="img-responsive">

<div class="item"><img src="/images/temp/6.jpg" class="img-responsive">

<div class="item"><img src="/images/temp/7.jpg" class="img-responsive">

<div class="item"><img src="/images/temp/8.jpg" class="img-responsive">

<div class="item"><img src="/images/temp/9.jpg" class="img-responsive">

<div class="item"><img src="/images/temp/10.jpg" class="img-responsive">

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

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

<!--/row -->

解决方案

将 width="100%" 添加到每个 img 行:它将按比例增加高度以保持纵横比.

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

解决方案

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.

这篇关于轮播图像未填充引导程序 3 中的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆