Bootstrap轮播使我的页脚显示在中间

Question

如果我尝试在带有Bootstrap Carousel的页面上显示我的页脚，则页脚不会显示在页面底部。

如果我取下转盘，则页脚会移到底部。

我的基本页脚是：

c_str

在此处查看演示：http://jsfiddle.net/2d4wn1aw/1/

有人知道为什么吗？

谢谢。

Answer 1

尝试删除所有<br>＆amp;在position:

上切换relative;到.footer

EDITED: See Fiddle

For sticky-footer check here:

粘性页脚基本上是div，其中所有内容都包含min-height: 100%和负margin-bottom（与页脚相同但负数），然后是div内wrapper 1}}将push与height相同的footer空格，为其留出空间（footer），这将超出包装器。

In case of interest, also a Flexbox sticky-footer example:

Answer 2

首先，您必须使用position:relative;添加包装，然后删除<br> 以下是示例：http://jsfiddle.net/Lgs1L673/1/

Answer 3

您只需<{1}}中删除 position: absolute或至少将其更改为 .footer

Answer 4

position: absolute中的.footer属性会导致页脚从元素流中移除。通过删除此属性，您的页脚将尊重其在DOM中的位置（您在HTML的末尾有它，因此它将是页面上的最后一段内容）。

Answer 5

<div class="row footer">
    <div class="small-6 columns">
        <img src="...">
        <p>some text</p>
    </div>
    <div class="small-6 columns">...</div>
    <div class="small-6 columns">...</div>
    <div class="small-6 columns">...</div>
</div><!-- end of row -->

设置在轮播和页脚上position:relative 表示页脚与轮播有关，而position:absolute表示页脚将直接在轮播后，从页脚中删除绝对位置将使其自由你可以改用bottom:0，

＆＃13;

＆＃13;

position:relative

＆＃13;

/* for testing only */
.item img {width: 100%; height: auto}
.carousel,
.item {
    height: 100%;
}

.carousel-inner {
    height: 100%;
}
.carousel-indicators li {
    padding:5px;
    
    background-color: #999;
}

.carousel-indicators .active {
    background-color: #444;
}

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.footer {
  position: relative;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

＆＃13;

＆＃13;

＆＃13;