0

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

1 に答える 1

0

スパンがカルーセル幅を決定するので、あなたが持っている写真の幅に最適なサイズになるスパンサイズを選ぶことをお勧めします。大きい画像はスパン幅に縮小されます。小さい画像は、背景が無地（または透明）の大きい画像に配置することで「アップサイズ」できます。

カルーセルは、その範囲内の画像を表示するように設計されています。おそらく、幅を動的に変更できますが、個人的には、変更は画像間で視覚的に多少不快になり、戻る/次へのボタンの位置も処理されると思います。

ところで、上記のテンプレートコードでは、すべてのアイテムがアクティブであることに注意してください。最初のループ反復のみがアクティブクラスのアイテムを生成するように、いくつかのロジックをループに入れる必要があります

于 2012-12-07T06:34:09.837 に答える