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

Question

我在一个长页面的顶部有一个简单的引导轮播。轮播上的项目是文本和图像的混合体，因此高度并不总是相同。

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

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

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

小提琴：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 的高度可能过高，请手动调整它们：

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