如何使用Bootstrap 5实现顶部圆角的页脚？

你的页脚圆角不生效主要有两个原因：

• 页脚使用了row类，该类默认带负margin，会让页脚背景超出父容器container的范围，导致圆角出现在视口边缘，肉眼无法察觉；
• fixed-bottom定位的元素放在container内不符合布局逻辑，fixed定位是相对于视口而非父容器的。

推荐解决方案 #

调整页脚结构，将背景色和圆角样式应用到容器内的行元素上，同时把页脚从container中移出：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <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>
</head>
<body>
    <div class="container">
        <!--HEADER-->
        <header class="row">
            <nav class="navbar navbar-dark bg-primary fixed-top col-12" style="border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;">
                    <h1 class="navbar-brand mb-2 mt-2 h1 mx-auto text-center">XYZ</h1>
            </nav>
        </header>
        <!--HEADER-->

        <!--CONTENT-->
        <!-- 此处添加页面内容 -->
        <!--CONTENT-->
    </div>

    <!--FOOTER-->
    <footer class="fixed-bottom text-center">
      <div class="container">
        <div class="row bg-primary py-2" style="border-top-left-radius: 10px; border-top-right-radius: 10px;">
          <div class="col-md-6 text-center">
            <a href="/privacy" class="text-decoration-none text-dark hover:text-primary">Privacy Policy</a>
          </div>
          <div class="col-md-6">
              &copy; XYZ 2023
          </div>
        </div>
      </div>
    </footer>
    <!--FOOTER-->
</body>
</html>

关键改动说明 #

1. 将footer从container中移出，避免fixed定位元素受父容器布局干扰；
2. 把bg-primary和圆角样式从footer移到内部的row上，确保圆角显示在内容区域的左上角/右上角；
3. 添加py-2类给行元素上下内边距，让页脚内容更美观。

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