javascript - 推特 Bootstrap 轮播标题与照片宽度不匹配

Question

我的 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">&lsaquo;</a>
                  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

            </div>
        </div>
    </div>

Answer 1

我建议选择一个跨度尺寸，该尺寸将是您拥有的照片宽度的最佳尺寸，因为跨度将决定轮播宽度。较大的图像将缩小到跨度宽度。您可以将较小的图像“放大”，方法是将它们放置在具有纯色(或透明)背景的较大图像中。

Carousel 旨在在其所在的跨度内显示图像 - 可以想象你可以动态改变宽度，但我个人认为这些变化在图像之间会有些视觉上的不协调，并且会有后退/下一步按钮位置需要处理好吧。

顺便说一句，请注意，在上面的模板代码中，每个元素都是事件的。您需要将一些逻辑放入循环中，以便只有第一个循环迭代生成具有事件类的元素