Bootstrap 4.x flex布局：如何将标题置于垂直导航菜单上方

算力阿峰

2026-8-18

解决Bootstrap垂直导航标题错位问题

问题出在你将标题和导航菜单放在了两个独立的flex-column容器中，若父容器采用flex行布局，这两个容器会被横向排列成两列。

正确的做法是把标题和导航菜单包裹在同一个flex-column容器内，这样它们会在同一列内垂直堆叠：

<div class='flex-column'>
    <h3>header</h3>
    <ul class='nav flex-column flex-nowrap text-1rem overflow-hidden' id='vnav'>
      <li class='nav-item'>
        <a class='nav-link collapsed' href='##submenu1' data-toggle='collapse' data-target='##submenu1'>
          <i class='fa-fw fa-sm fa-regular fa-user'></i><span class='ml-1'>Student Profile</span>
        </a>
      </li>
      <!-- 其他导航项请在这里补充 -->
    </ul>
</div>

如果需要调整标题与导航的间距，可使用Bootstrap内置的间距类，比如给h3添加mb-3类来增加底部外边距：