如何在bootstrap上调整大小时保持页面底部的页脚

在Bootstrap中，要保持页面底部的页脚在调整大小时始终位于页面底部，可以使用以下方法：

使用固定页脚：在页面的主要内容部分之后添加一个固定高度的页脚。这样无论页面内容有多少，页脚都会始终保持在底部。可以使用Bootstrap的固定页脚类.fixed-bottom来实现。示例代码如下：

<footer class="footer fixed-bottom">
  <div class="container">
    <span class="text-muted">页脚内容</span>
  </div>
</footer>

使用Flexbox布局：使用Flexbox布局可以轻松实现将页脚固定在底部。在页面的主要内容容器上应用Flexbox布局，并将flex-direction属性设置为column，这样内容容器会自动占满剩余空间，将页脚推到底部。示例代码如下：

<div class="container-fluid d-flex flex-column min-vh-100">
  <div class="row flex-grow-1">
    <!-- 主要内容 -->
  </div>
  <footer class="footer">
    <div class="container">
      <span class="text-muted">页脚内容</span>
    </div>
  </footer>
</div>

使用Sticky Footer布局：Sticky Footer布局是一种常用的技术，可以将页脚固定在页面底部，即使页面内容不足以填充整个屏幕高度。可以使用Bootstrap提供的类.sticky-footer-wrapper和.sticky-footer来实现。示例代码如下：

<div class="sticky-footer-wrapper">
  <div class="content">
    <!-- 主要内容 -->
  </div>
  <footer class="footer sticky-footer">
    <div class="container">
      <span class="text-muted">页脚内容</span>
    </div>
  </footer>
</div>

以上是三种常用的方法来保持页面底部的页脚在调整大小时保持固定位置。根据具体需求和页面结构，选择适合的方法即可。

腾讯云相关产品和产品介绍链接地址：