3

このページには、一連の画像とキャプションを表示する (Twitter Bootstrap からの) 画像カルーセルがあります。すべての画像は同じ高さですが、カルーセル キャプションを含む要素は、キャプション テキストの長さに応じて異なる高さになります。

これは、ブラウザーの幅が狭い場合 (モバイル デバイスで表示する場合など) に問題になります。これは、ウィンドウが狭くなるにつれて、キャプションの高さの違いがより顕著になるためです。ブラウザの幅を約 450px にして、カルーセルの下を下にスクロールすると、カルーセル内の画像が変更されるたびに、カルーセルの下のコンテンツが上下にジャンプして、新しい画像の小さい/大きいサイズに対応することがわかります。キャプション。

これにより、コンテンツが約 5 秒ごとに上下にジャンプするため、(小さな画面では) カルーセルの下のテキストを読むのが難しくなります。カルーセルをページの一番下に配置するか、カルーセル画像の自動循環を無効にする以外に、この問題の解決策はありますか?

4

2 に答える 2

1

.carousel-captiondivに最小の高さを指定すると機能することを願っています。そうでない場合は、メディアクエリを使用して、小さなデバイスで正確な高さを指定してみてください。

最初の方法：

.carousel-caption {
  min-height: 300px !important;
}

2番目の方法：

@media screen and max-width:xxxpx
{
.carousel-caption {
  height: 300px !important;
} 

}

これは小さな段落のために下部にいくらかの空きスペースがあるかもしれませんが、逃げ道はありません。これにより、少なくとも上下するのを防ぐことができます。

于 2013-01-28T17:58:24.420 に答える
0

キャプション コンテナがその子要素 ​​(表示される文字の量) に適応する必要があると言っている場合は、@Darshan がoverflow: hidden;css 属性と共に提案するものを試すか、キャプション コンテナをその子要素内の絶対位置に設定することができます。親戚の親。

例えば、

<div class="relative" style="position: relative">
    <div class="child" style="position: absolute; bottom: 0; left: 0;">
        <p> My text yadda yadda yadda... </p>
    </div>
    <div style="clear: both;"></div>
</div>

親コンテナーをrelativeその子要素の境界をリセットするように設定すると、すべての子要素の位置がそのrelative位置に最も近い親にバインドされます。

このように、コンテンツは引き続き表示されますが、相対的な親に高さの指定がない限り、ページの残りのコンテンツにドロップダウンすることはありません。

于 2013-01-28T19:27:26.970 に答える