如何为flex容器添加Bootstrap页脚？小屏幕下页脚无法固定底部问题

我正尝试在项目中添加Bootstrap页脚，该页脚在大屏幕上显示正常，但缩小屏幕尺寸（≤1150px）时，会出现在页面中间而非底部。相关代码及屏幕截图如下：

相关代码 #

自定义CSS #

@media only screen and (max-width: 1150px) {
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
}

页面结构代码 #

<div class="bigcontainer">
  <div class="box1">
    <h3>RENOVATIONS</h3>
    <p><br /></p>
    <p>
      At <em>Razca Designs</em>, we specialize in interior renovation design, from small kitchen updates to complete home remodels. We have a wealth of experience and expertise in creating personalized spaces that reflect our clients’ unique styles and
      personalities.
    </p>
    <p><br /></p>
    <p>
      Our team will work closely with you every step of the way to bring your project to completion. We take the time to fully understand the specific challenges and pain points of each client in their current home, and use this information to design a tailor-made
      solution that addresses each individual need. Our approach is to provide you with a beautiful and functional home that you’ll love spending time in
    </p>
    <p><br /></p>
    <b><em>Our passion is creating personalized, welcoming spaces that are tailored to you and your family. With Razca Designs, you can trust us to transform your home into a space that exceeds your expectations</em></b>
  </div>
  <div class="box2">
    <img src="textimages/reno10.jpg" alt="" class="img-fluid" />
  </div>
  <div class="box3">
    <img src="textimages/renov-3.jpg" alt="" class="img-fluid" />
    <img src="textimages/ren101.jpg" alt="" class="img-fluid" />
  </div>
  <div class="box4">
    <h3>RENOVATIONS</h3>
    <p><br /></p>
    <ul class="ab">
      <li>
        Reviewing permits or managing permit applications if necessary
      </li>
      <li>reate the neceesary drawings, including:</li>
      <p>Existing and demolition plans</p>
      <p>Proposed plans</p>
      <p>Construction plans</p>
      <p>Electrical plans.</p>
      <p>Furniture Plans</p>
      <li>
        Providing materials and finishes according to your design palette
      </li>
      <li>Design of custom furniture</li>
      <li>Requesting quotes; ordering and coordinating deliveries</li>
      <li>Dealing contractors and craftsmen</li>
      <li>Dealing with suppliers and overseeing quality control</li>
      <li>
        Final design steps, like finishes and confirming forniture and cabinetery.
      </li>
    </ul>
  </div>
</div>
<!-- Footer -->
<footer class="text-center text-lg-start bg-white text-muted">
  <!-- Section: Social media -->
  <section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">
    <!-- Left -->
    <div class="me-5 d-none d-lg-block">
      <span>Get connected with us on social networks:</span>
    </div>
    <!-- Left -->

    <!-- Right -->
    <div>
      <a href="" class="me-4 link-secondary">
        <i class="fab fa-facebook-f"></i>
      </a>
      <a href="" class="me-4 link-secondary">
        <i class="fab fa-twitter"></i>
      </a>
      <a href="" class="me-4 link-secondary">
        <i class="fab fa-google"></i>
      </a>
      <a href="" class="me-4 link-secondary">
        <i class="fab fa-instagram"></i>
      </a>
      <a href="" class="me-4 link-secondary">
        <i class="fab fa-linkedin"></i>
      </a>
      <a href="" class="me-4 link-secondary">
        <i class="fab fa-github"></i>
      </a>
    </div>
    <!-- Right -->
  </section>
  <!-- Section: Social media -->

  <!-- Section: Links  -->
  <section class="">
    <div class="container text-center text-md-start mt-5">
      <!-- Grid row -->
      <div class="row mt-3">
        <!-- Grid column -->
        <div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
          <!-- Content -->
          <h6 class="text-uppercase fw-bold mb-4">
            <i class="fas fa-gem me-3 text-secondary"></i>Company name
          </h6>
          <p>
            Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </p>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
          <!-- Links -->
          <h6 class="text-uppercase fw-bold mb-4">Products</h6>
          <p>
            <a href="#!" class="text-reset">Angular</a>
          </p>
          <p>
            <a href="#!" class="text-reset">React</a>
          </p>
          <p>
            <a href="#!" class="text-reset">Vue</a>
          </p>
          <p>
            <a href="#!" class="text-reset">Laravel</a>
          </p>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
          <!-- Links -->
          <h6 class="text-uppercase fw-bold mb-4">Useful links</h6>
          <p>
            <a href="#!" class="text-reset">Pricing</a>
          </p>
          <p>
            <a href="#!" class="text-reset">Settings</a>
          </p>
          <p>
            <a href="#!" class="text-reset">Orders</a>
          </p>
          <p>
            <a href="#!" class="text-reset">Help</a>
          </p>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
          <!-- Links -->
          <h6 class="text-uppercase fw-bold mb-4">Contact</h6>
          <p>
            <i class="fas fa-home me-3 text-secondary"></i> New York, NY 10012, US
          </p>
          <p>
            <i class="fas fa-envelope me-3 text-secondary"></i> info@example.com
          </p>
          <p>
            <i class="fas fa-phone me-3 text-secondary"></i> + 01 234 567 88
          </p>
          <p>
            <i class="fas fa-print me-3 text-secondary"></i> + 01 234 567 89
          </p>
        </div>
        <!-- Grid column -->
      </div>
      <!-- Grid row -->
    </div>
  </section>
  <!-- Section: Links  -->

  <!-- Copyright -->
  <div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.025)">
    © 2021 Copyright:
    <a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>
  </div>
  <!-- Copyright -->
</footer>
<!-- Footer -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

屏幕截图 #

• 大屏幕显示：
• 小屏幕显示：

问题原因 #

你给body设置了flex布局和min-height:100vh，但未给页脚添加margin-top: auto属性。在小屏幕下，当页面内容高度不足100vh时，flex布局无法自动将页脚推至页面底部；而大屏幕下未应用该flex布局，页脚能正常显示在底部。

修复方案 #

修改自定义CSS，给小屏幕下的footer添加margin-top: auto，让flex布局自动分配空间将页脚推到底部：

@media only screen and (max-width: 1150px) {
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0; /* 可选：移除body默认margin，避免不必要的滚动条 */
  }
  footer {
    margin-top: auto;
  }
}

额外优化建议 #

可以将flex布局应用到所有屏幕尺寸，确保所有设备下页脚都固定在底部：

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}
footer {
  margin-top: auto;
}

内容的提问来源于stack exchange，提问作者baba