使用 bootstrap 将元素定位到底部

Question

我知道您可以使用以下 css 代码将元素固定在底部：

position: fixed;
bottom: 0;
left: 0;

问题是在小型设备上底部的内容覆盖了上面的内容。有人知道 bootstrap 是否针对此问题提供了响应式解决方案吗？

Answer 1

您可以随时使用 !important。但是，您可能应该使用粘性页脚。您需要将填充放在 body > .container 上的页脚高度。看这里 http://getbootstrap.com/examples/sticky-footer-navbar/.

Answer 2

.force-to-bottom {
    position:absolute;
    bottom: 5%;
    width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/latest/journal/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row force-to-bottom text-center">
        <div class="col-xs-12">
             <h1>
           <button class="btn btn-primary" type="button">Save</button>
          </h1>

        </div>
    </div>
</div>

学分：

Answer 3

如果我对问题的理解正确，你可以通过给你的 body 一个 margin-bottom 来解决这个问题。假设您有一个固定的 div，其 height 为 200px。

使用：

body {
    margin-bottom: 200px;
}

使用 bootstrap 将元素定位到底部

Position an element to the bottom using bootstrap

css

twitter-bootstrap

responsive