无法使页脚响应

Question

我正在使用具有粘性页脚功能的Bootstrap 3，我注意到如果我将窗口缩小到最小值，我会让按钮向右移动。

我想要的是页脚高度要放大，所以内容不会出页脚。

这是我的代码：

<div id="footer" class="footer">
    <div class="pull-left">
        <h6 class="text-white">Developed by a normal user as you</h6>
    </div>

    <div class="pull-right">
        <button type="button" id="select-language" class="btn btn-sm btn-success" rel="select-language" data-original-title="" title="">
            Select a language</button>
    </div>
</div>

这是我的css：

.footer
{
    font-size: 13px;
    width: 100%;
    height: 50px;
    background-color: #4790ca;
    bottom: 0;
    position: absolute;
    padding: 5px 10px;
    display: inline-block;
    float: left;
    line-height: 3;
    text-align: left;
    font-weight: bold;
}

出现的结果是这样的：

this is a jsfiddle that replicate the issue.

Answer 1

如果您希望按钮不从页脚中输出，请将页脚高度设置为auto

Answer 2

由于您float .footer（pull-left和pull-right）中的所有元素<div id="footer" class="footer clearfix"> ... </div> ，因此您需要apply a clearfix。您可以使用的Bootstrap provides a built-in class。

{{1}}

Working example.

Answer 3

在媒体查询中，您需要设置

.footer { height: auto; text-align: center; }