0

長いページの上部に単純な Bootstrap Carousel があります。カルーセルのアイテムはテキストと画像が混在しているため、常に同じ高さではありません。

これにより、カルーセルの下にバウンス ページが表示されます。レスポンシブ レイアウトを維持し、テキストのバウンスを停止する方法を見つけるのを手伝ってもらえますか? 船酔いしちゃった！

このソリューションでは、次のことを解決する必要があります。

  1. カルーセルの下のテキストのバウンスを停止
  2. レスポンシブ ページが特定の幅を下回る場合、2 列のカルーセル アイテムが 1 列に折りたたまれることを引き続き許可します (これは、1 列の狭いウィンドウで表示すると、カルーセルの高さが 2 倍になる可能性があることを意味します)。

フィドル: http://jsfiddle.net/PmZnh/1/

<h1>This is my carousel site</h1>
<hr>
<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
        <h2>List One</h2>
        <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
    </div>
    <div class="item">
        <h2>List Two</h2>
        <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li></ul>
    </div>
    <div class="item">
        <h2>List Three</h2>
        <ul><li>Item 1 is longer this time. Way longer than the first time. It just keeps going and going and going.</li><li>Item 2</li><li>Item 3</li><li>Getting sea sick yet?</li></ul>
    </div>
  </div>
  <!-- Carousel nav -->
  <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>
<hr>
<p>The rest of the text on the site shouldn't bounce and should be responsive-friendly!</p>
<p>1. the .items are flexible height (but usually within 10-20px)<br>
2. when the page width is below 760px the list shrinks from two columns to one column, meaning the height may now be twice as tall as before.</p>
4

1 に答える 1

2

min-heightカルーセル div にa を設定する必要があります。

#myCarousel{
    min-height: 180px;
}

特定のビューポートで div の高さが高すぎる可能性があるという問題がある場合は、手動で調整します。

/* Large desktop */
@media (min-width: 1200px) { 
  #myCarousel{
    min-height: 130px;
  }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 
  #myCarousel{
    min-height: 140px;
  }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
  #myCarousel{
    min-height: 180px;
  }
}

/* Landscape phones and down */
@media (max-width: 480px) { 
  #myCarousel{
    min-height: 200px;
  }
}
于 2013-07-13T07:34:20.137 に答える