我对这种响应式的东西太陌生了。我正在尝试使用新 bootstrap 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 -->
Add width="100%"
到每个 img 行:<img src="/images/temp/2.jpg" width="100%">
它将按比例增加高度以保持纵横比。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)