Bootstrap页签切换时整个Div左移问题排查与解决求助

问题原因 #

你的代码存在两处关键错误，导致切换页签时布局偏移：

1. ARIA属性不匹配：页签面板（tab-pane）的aria-labelledby属性值与对应页签（nav-link）的ID不一致，干扰了Bootstrap组件的正常交互逻辑，引发布局异常。
2. 无效锚点跳转：页签链接里的href="#"会触发页面锚点跳转，浏览器试图定位到页面顶部，间接引发布局偏移。

修复后的代码 #

<footer class="navbar navbar-dark bg-dark text-light">
  <div class="container mt-5">
      <div class="row">
          <div class="col-6">
              <span class="navbar-brand m-2 h1 text-white">Mijn Blog</span>
          </div>
          <div class="col-6">
              <ul class="nav nav-tabs" id="myTab" role="tablist">
                  <li class="nav-item" role="presentation">
                      <a class="nav-link active" id="about-tab" data-bs-toggle="tab" data-bs-target="#pills-about" role="tab" aria-controls="pills-about" aria-selected="true">About Me</a>
                  </li>
                  <li class="nav-item" role="presentation">
                      <a class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
                  </li>
              </ul>
              <div class="tab-content" id="myTabContent">
                  <div class="tab-pane fade show active text-white" id="pills-about" role="tabpanel" aria-labelledby="about-tab" tabindex="0">
                      <p>Ik ben IT-er, tech enthousiast en coach bij Bit Academy. Vanuit deze achtergrond probeer ik zo veel mogelijk mensen iets nieuws te leren over tech.</p>
                  </div>
                  <div class="tab-pane fade text-white" id="pills-contact" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
                      <p>E-mail: <a href="mailto:info@bit-academy.nl">info@bit-academy.nl</a></p>
                      <p>Adres: Koningin Wilhelminaplein 1, Amsterdam</p>
                  </div>
              </div>
          </div>
      </div>
  </div>
</footer>

关键修改点 #

• 移除页签链接中的href="#"，避免锚点跳转干扰布局。
• 修正aria-labelledby属性值，使其与对应页签的ID（about-tab/contact-tab）完全匹配。
• 补充页签的role="tab"、aria-controls、aria-selected属性，符合Bootstrap组件标准规范，确保交互逻辑正常。
• 调整tab-content的ID为myTabContent，与页签容器的id="myTab"形成对应，增强组件关联性。

额外优化建议 #

如果仍有轻微布局波动，可给包含页签的col-6容器添加overflow-hidden类，避免内容溢出导致的布局偏移：

<div class="col-6 overflow-hidden">

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