我在长页面的顶部有一个简单的引导轮播。轮播上的项目是文本和图像的混合,因此并不总是相同的高度。
这会导致轮播下方的弹跳页面。你能帮我找出一种方法来保持响应式布局并停止弹跳文本吗?我晕船了!
解决方案需要解决以下问题:
- 停止在轮播下方弹跳文本
- 当响应式页面低于一定宽度时,继续允许 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">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</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>