Bootstrap 5页脚在平板/笔记本尺寸下布局错位问题求助

我使用Bootstrap 5、HTML和CSS开发网站，调整屏幕尺寸时发现页脚列存在布局问题：移动端和桌面端显示正常，但平板及笔记本尺寸下，页脚列无法对齐。

平板尺寸显示效果 #

桌面尺寸显示效果 #

相关代码 #

Test.html #

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Home | </title>

<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="../css/index.css" />

<link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Default"
    disabled
          href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
        >
        <link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Web Awesome"

          href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d"
        >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css"
          >
        <link rel="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>


  </head>
  <body>
    
    

    <!-- FOOTER SECTION START -->
    <footer class="bg-dark text-white " id="footer">
      <div class="container">
        <div class="row mb-2">
          <div class="col-md-3 mt-5">
            <h4>About Us</h4>
            <hr />
            <p>We are skilled IT professionals who specialize in solving a range of problems that our clients may face in the realm of IT.

            </p>
            <!-- FACEBOOK SECTION -->
            <a href="">
              <i class="fa-brands fa-facebook fa-2x"></i>
            </a>

            <!-- INSTAGRAM SECTION  -->
            <a href="">
              <i class="fa-brands fa-instagram fa-2x"></i>
            
            
            </a>

            <!-- TWITTER SECTION -->
            <a href="">
              <i class="fa-brands fa-twitter fa-2x"></i>
              
            <!-- LINKEDIN SECTION -->
            </a>
            <!-- <a href="#">
              <i class="fa-brands fa-linkedin fa-2x"></i>
            </a> -->

            <!-- WHATSAPP SECTION -->
            <!-- <a href="#">
              <i class="fa-brands fa-whatsapp fa-2x"></i>
            </a> -->
              
          </div>
          <div class="col-md-3 mt-5">
            <h4>Quick Links</h4>
            <hr />
            <ul class="navbar-nav">
              <li class="nav-item"><a href="/index.html" class="nav-link">Home</a></li>
              <li class="nav-item"><a href="/about.html" class="nav-link">About</a></li>
              <li class="nav-item"><a href="/services.html" class="nav-link">Services</a> </li>
              <li class="nav-item"><a href="/contact.html" class="nav-link">Contact</a> </li>
            </ul>
          </div>
          
          <div class="col-md-3 mt-5">
            <h4>Privacy and Terms</h4>
            <hr />
            <ul class="navbar-nav">
              <li class="nav-item"><a href="#" class="nav-link">Privacy Policy</a></li>
              <li class="nav-item"><a href="#" class="nav-link">Terms & Coniditions</a></li>
              <li class="nav-item"><a href="#" class="nav-link">API Documentation</a> </li>
            </ul>
          </div>
          <div class="col-md-3 mt-5">
            <h4>Contact Info</h4>
            <hr />
            <p class="text-white">
              City, State 12345 <br />
              Call Us Now 123-456-7890 <br />
              example@email.com
            </p>
          </div>
        </div>
      </div>
      <div class="bg-dark text-white text-center py-4" id="copyright">
        Copyright &copy; 2023 . All Rights Reserved.
      </div>
    </footer>
    <!-- FOOTER SECTION CLOSE -->
  </body>
</html>

Test.css #

:root {
--desktop: 1200px;
--laptop: 992px;
--tablet: 768px;
--mobile: 576px;
}

footer a {
    color: hsl(0, 0%, 100%);
    text-decoration: none;
}

footer a  i {
    color: hsl(0, 0%, 100%);
    text-decoration: none;
    color:white;
}

#footer {
    color: hsl(0, 0%, 100%);
}

#copyright {
    border-top: 1px solid hsl(0, 0%, 20%) ;
}

/* SMALL MEDIA QUERY */
@media screen and (min-width: var(--mobile)) and (max-width: var(--tablet)) {
    .nav-link::after {
        content: '';
        opacity: 0;
        transition: all 0.2s;
        height: 2px;
        width: 100%;
        background: hsl(18, 100%, 62%);
        position: absolute;
        bottom: 0;
        left: 0;
    }
    
    .nav-link:hover::after {
        opacity: 1;
    }

    .dropdown:hover > .dropdown-menu {
        display: block;
        background-color: hsl(210, 45%, 30%);
        margin-top: 0;
        width: 175px;

        .btn {
            color: hsl(0, 0%, 100%);
        }

        .dropdown-item:hover {
            background-color: hsl(210, 55%, 41%);
        }
    }

    footer li:hover {
        color: hsl(24, 83%, 65%);
        transition: 0.2s;
    }
    
    footer i:hover {
        color: hsl(24, 83%, 65%);
        transition: 0.2s;
    }
}
/* MEDIUM MEDIA QUERY */
@media screen and (min-width: var(--tablet)) and (max-width: var(--laptop)) {
    .nav-link::after {
        content: '';
        opacity: 0;
        transition: all 0.2s;
        height: 2px;
        width: 100%;
        background: hsl(18, 100%, 62%);
        position: absolute;
        bottom: 0;
        left: 0;
    }
    
    .nav-link:hover::after {
        opacity: 1;
    }

    .dropdown:hover > .dropdown-menu {
        display: block;
        background-color: hsl(210, 45%, 30%);
        margin-top: 0;
        width: 175px;

        .btn {
            color: hsl(0, 0%, 100%);
        }

        .dropdown-item:hover {
            background-color: hsl(210, 55%, 41%);
        }
    }

    footer li:hover {
        color: hsl(24, 83%, 65%);
        transition: 0.2s;
    }
    
    footer i:hover {
        color: hsl(24, 83%, 65%);
        transition: 0.2s;
    }
}
/* LARGE MEDIA QUERY */
@media screen and (min-width: var(--laptop)) and (max-width: var(--desktop)) {
    .nav-link::after {
        content: '';
        opacity: 0;
        transition: all 0.2s;
        height: 2px;
        width: 100%;
        background: hsl(18, 100%, 62%);
        position: absolute;
        bottom: 0;
        left: 0;
    }
    
    .nav-link:hover::after {
        opacity: 1;
    }

    .dropdown:hover > .dropdown-menu {
        display: block;
        background-color: hsl(210, 45%, 30%);
        margin-top: 0;
        width: 175px;

        .btn {
            color: hsl(0, 0%, 100%);
        }

        .dropdown-item:hover {
            background-color: hsl(210, 55%, 41%);
        }
    }

    footer li:hover {
        color: hsl(24, 83%, 65%);
        transition: 0.2s;
    }
    
    footer i:hover {
        color: hsl(24, 83%, 65%);
        transition: 0.2s;
    }
}

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