我有Twitter Bootstrap旋转木马相当不错的大部分工作,但我的照片是不同的宽度和底部的标题匹配最宽的宽度,所以当我有较小的宽度的照片,标题仍然是黑色的前一个宽度,看起来有点不专业。我的代码如下,我想知道是否有任何方法可以解决这个问题,使宽度始终与照片匹配。
<div class="row">
<div class="span8 offset2">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<!-- here I loop through and add a bunch of photos -->
{% for photo in record_photos %}
<div class="active item">
<a href="/url"><img src="some-src"></a>
<div class="carousel-caption">
<h3 class="center-it">some caption</h3>
</div>
</div>
{% endfor %}
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
发布于 2012-12-07 06:34:10
我建议选择一个跨度大小,这将是您的照片宽度的最佳大小,因为跨度将决定旋转木马的宽度。较大的图像将缩小到跨度宽度。较小的图片,你可以通过将它们放在一个有实心(或透明)背景的较大的图片中来“放大”。
Carousel的设计是为了在它的跨度内显示图像--可以想象你可以动态地改变宽度,但我个人认为图像之间的变化在视觉上会有点不协调,而且还需要处理后退/下一步按钮的位置。
顺便说一句,请注意,在上面的模板代码中,每个项目都是活动的。您将需要在循环中加入一些逻辑,以便只有第一次循环迭代才能生成具有活动类的项
https://stackoverflow.com/questions/13757407
复制