javascript - 如何停止具有混合高度、一列或两列 Bootstrap Carousel 元素的弹跳响应页面？

Question

我在一个长页面的顶部有一个简单的 Bootstrap 轮播。轮播中的元素混合了文本和图像，因此高度并不总是相同。

这会导致轮播下方出现跳动页面。你能帮我想出一种方法来保持响应式布局并停止弹跳文本吗？我晕船了!

解决方案需要解决以下问题:

1. 停止在轮播下方弹跳文本
2. 当响应页面低于特定宽度时，继续允许 2 列轮播元素折叠成 1 列(这意味着当在一列的窄窗口中查看轮播时，轮播的高度可能会加倍)

fiddle :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>

Answer 1

您应该为轮播 div 设置一个 min-height:

#myCarousel{
    min-height: 180px;
}

如果您现在遇到问题，事实上 div 的高度在某些视口(viewport)上可能太高，请手动调整它们:

/* 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;
  }
}