为什么包含 Snook 的简单 jQuery 幻灯片的 Bootstrap 行的高度为 0？

Question

我正在我的 Bootstrap 3 网站上实施 Snook 的简单 jQuery 幻灯片。

在这里查看：https://snook.ca/archives/javascript/more-simple-slideshow

出于某种原因，包含幻灯片的行的高度为 0，因此以下所有文本都出现在我的幻灯片图像的顶部。

这是我的代码：

<div class="row bottom-margin">
    <div class="slideshow">
        <img class="img-responsive" src="Splash1.jpg">
        <img class="img-responsive" src="Splash2.jpg">
    </div>
</div>

...

<script>
    $(function(){
        $('.slideshow > :gt(0)').hide();
        setInterval(function(){$('.slideshow > :first-child').fadeOut().next().fadeIn().end().appendTo('.slideshow');}, 5000);
    });
</script>

和 CSS:

.slideshow {
    position: relative;
}

.slideshow > * {
    position: absolute;
    left: 0;
    top: 0;
}

我的故障排除显示 div 高度为 0 通常是由漂浮的儿童引起的，但我认为这不是我的问题。我可能是错的，我是新手。

感谢您的帮助！

Answer 1

你很接近。在本例中，阻止 children 的高度应用于 parent 的不是浮动而是 position: absolute。在这种情况下，我建议设置幻灯片本身的高度。

Answer 2

正如您在演示页面中看到的，固定宽度 (500px) 和高度 (332px) 值被赋予包装器 div .fadein.

HTML

<div class="fadein">
    <img src="https://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
    <img src="https://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
    <img src="https://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
</div>

CSS

.fadein {
    position: relative;
    height: 332px;
    width: 500px;
}

JS

$(function(){
        $('.fadein img:gt(0)').hide();
        setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});

为什么包含 Snook 的简单 jQuery 幻灯片的 Bootstrap 行的高度为 0？

Why does my Bootstrap row containing Snook's Simple jQuery Slideshow have a height of 0?

html

css

jquery

slideshow

twitter-bootstrap