css - twitter-bootstrap カルーセルのテーブル?

Question

私は backbone.js で遊んでいて、bootstrap-carousel プラグインを悪用して、ビューの遷移をもう少し光沢のあるものにすることを検討しています。

テーブルを含むアイテムから別のアイテムに移行するとき、スライドはうまく進みます。ただし、表に移行する場合、スライドが完了するまで表は表示されません。

デモについては、このjsFiddleを参照してください。

<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
      <table class="table table-bordered table-striped">
        <tr>
          <th>Key</th>
          <th>Value</th>
        </tr>
        <tr>
          <td>bootstrap</td>
          <td>Awesome</td>
        </tr>
      </table>
    </div>
    <div class="item">Second</div>
    <div class="item">Third</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>​

$('.carousel').carousel({
  interval: false
});​

これは私が間違っていることですか、これらの遷移がどのように機能するかの必然的な結果ですか、それともブートストラップの小さなバグですか?

(Chrome 21 & 22、Firefox 14、Safari 5.1.7で再​​現可能)

スクリーンショット:

Answer 1

.carousel-innerの高さを と同じ高さに設定するとどうなります#myCarouselか?

http://jsfiddle.net/9ga5t/

#myCarousel, 
.carousel-inner {
  height: 300px;
}