Question

我正在使用Bootstrap，我想将row的最后.container放在页面内容的底部。

我尝试的第一件事是以下代码：

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
      .highlight {
        border: 1px solid red;
      }

      .push-to-bottom {
        position: absolute;
        bottom: 30px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container highlight">
      <div class="row">
        <div class="col-md-12">
          <img src="http://placehold.it/500x500">
        </div>
      </div>
      <div class="row push-to-bottom text-center highlight">
        <div class="col-md-12">
          <button>Press me</button>
        </div>
      </div>
    </div>
  </body>
</html>

但是，由于position: absolute属性，它无法按预期工作 - 最后一行对DOM中的其他元素一无所知，因此宽度和定位错误。

好吧，我将此代码更改为以下内容：

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
      .highlight {
        border: 1px solid red;
      }

      .rel {
        position: relative;
      }

      .push-to-bottom {
        position: absolute;
        bottom: 30px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container highlight rel">
      <div class="row">
        <div class="col-md-12">
          <img src="http://placehold.it/500x500">
        </div>
      </div>
      <div class="row push-to-bottom text-center highlight">
        <div class="col-md-12">
          <button>Press me</button>
        </div>
      </div>
    </div>
  </body>
</html>

如您所见，我已将position: relative属性添加到.container元素，因此现在width: 100%执行正确的工作，我们的元素放在.container中视觉。但它仍然存在以下问题：

它不关心其他row，因此它可以与其他行的内容重叠
它仍未放置在页面底部，而不是仅.container

如果没有与此问题相关的其他问题中建议的硬编码高度和宽度，我怎样才能实现此类行为？

Answer 1

您可以使用页脚。

<footer id="footer" class="footer row">
        <div class="container">
        Your text or DOM here
        </div>
</footer>

CSS：

footer {
display: block;
bottom: 0px;
height: [depends by content]
right: 0%;
left: 0%;
position: fixed !important;
position: absolute;
top: expression((0-(footer.offsetHeight)+ (document.documentElement.clientHeight? document.documentElement.clientHeight: document.body.clientHeight)+(ignoreMe=document.documentElement.scrollTop? document.documentElement.scrollTop:document. body.scrollTop))+'px');
text-align: center;
visibility: visible;
}

如何将最后一个Bootstrap的行放在页面内容的底部

1 个答案: