Bootstrap导航栏切换按钮致移动端内容左移问题修复求助

问题 #

我的网站基于Bootstrap框架开发，在真实移动端设备中点击导航栏的折叠按钮（toggle button）后，网站整体内容会左移且无法居中；但在浏览器的响应式调试模式下，内容正常居中，折叠按钮也不会导致偏移。以下是我的HTML和CSS代码，求修复方案。

HTML代码 #

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>*******************</title>
    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">

    <meta name="robots" content="noimageindex">
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width">
  </head>

  <body>
    <header class="fixed-top">
      <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
          <a class="navbar-brand" href="index.php">*****</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="#qsj">Qui-suis-je</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#competences">Compétences</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#real">Réalisations</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#contact">Contact</a>
              </li>
            </ul>
          </div>
      </div>
    </nav>
  </header>

  <main>
    <div class="box-present">
      <div class="box-present-title">
        <h1>****************</h1>
        <h2>Développeur Web PHP</h2>
      </div>
      <div class="box-present-img-dev">
        <div class="box-img-perso">
          <img src="vf.jpg" class="img-perso" alt=" " />
        </div>
      </div>
    </div>
    <div data-bs-spy="scroll" data-bs-target="#navbar-website" data-bs-offset="0" tabindex="0">

    /* The rest of the main */

  </main>

  <footer>
      ...  /* The rest of the footer */
  </footer>

  </body>
</html>

CSS代码 #

body {
    background-color: white;
    width: 100%;
    font-size: 1rem;
    z-index: 1;
}

header {
    background-color: white;
}

.navbar-brand {
    font-size: 3rem;
    color: #303030;
    font-family: 'Oswald', sans-serif;
}

.navbar-brand:hover {
    color: #303030;
}

 .nav-link {
    color: #303030;
    font-family: 'Roboto', sans-serif;
    font-size: 1.8rem;
    padding-bottom: 0.5rem;
}

.navbar-nav {
    margin-left: auto;
}

.nav-item {
    margin-right: 1rem;
    margin-left: 1rem;
    text-align: center;;
}

.nav-link:hover {
    color: #303030;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(48,48,48, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    width: 5rem;
    height: 5rem;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

.box-present {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    margin-top: 15rem;
}

.box-present-title {
    background-color: #54F98D;
    width: 600px;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.box-present-img-dev {
    display: flex;
    background-color: #FF866A;
    width: 600px;
    height: 400px;
    align-items: center;
}

.box-title-site {
    text-align: center;
    clear: both;
}

.box-present-title > h1 {
    color: #303030;
    font-family: 'Oswald', sans-serif;
    font-size: 3.5rem;
    margin-left: auto;
    margin-right: auto;
    width: 12rem;
    text-align: center;
}

.box-img-perso {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: auto;
}

.box-present-title > h2 {
    color: #303030;
    font-family: 'Oswald', sans-serif;
    font-size: 2rem;
    margin-left: auto;
    margin-right: auto;
    width: 12rem;
    text-align: center;
}

.box-img-perso > .img-perso {
    height: 60%;
    width: 60%;
    border: 15px solid #303030;
    border-radius: 50% 20% / 10% 40%;
}

/* The rest of the css */

问题原因及修复方案 #

1. 补全视口元标签属性 #

真实移动端浏览器会自动缩放页面，原viewport标签缺少initial-scale=1和shrink-to-fit=no，导致页面渲染偏移。

修改HTML的head部分：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

2. 缩小折叠按钮图标尺寸 #

自定义的5rem宽高远大于Bootstrap默认值，在移动端会溢出容器挤压页面内容。

修改CSS中按钮图标样式：

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(48,48,48, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    /* 调整为适配移动端的合理尺寸 */
    width: 2.5rem;
    height: 2.5rem;
}

3. 给固定导航栏添加宽度控制 #

固定顶部的导航栏需确保不会超出视口，添加Bootstrap内置的w-100类强制宽度为100%。

修改HTML的header标签：

<header class="fixed-top w-100">

4. 移除body的冗余宽度设置 #

Bootstrap已默认给body设置width:100%，手动添加的属性会和移动端滚动行为冲突。

修改CSS的body样式：

body {
    background-color: white;
    /* 移除width:100% */
    font-size: 1rem;
    z-index: 1;
}

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