twitter 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旨在顯示其跨度內的圖像-可以動態地更改寬度，但是我個人認為這些更改在圖像之間在視覺上會產生震撼，並且還會有后退/下一個按鈕位置需要處理。

順便說一句，請注意，在上面的模板代碼中，每個項目都是活動的。 您將需要在循環中添加一些邏輯，以便只有第一個循環迭代才能生成具有活動類的項目