Bootstrap导航栏布局异常：桌面端水平堆叠，移动端垂直堆叠

问题描述 #

使用基础Bootstrap主题，希望在导航栏添加第二行元素，设置col-lg-12后预期该元素在桌面和移动端均垂直堆叠。实际移动端布局正常，但桌面端元素却分半显示，如同占6列宽度。原本认为将新容器置于nav类内可避免内容溢出，但出现了上述布局问题。

问题代码 #

<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainnav">
<div class="container px-12 px-lg-12">
<a class="navbar-brand" href="#page-top">start bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarresponsive" aria-controls="navbarresponsive" aria-expanded="false" aria-label="toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarresponsive">
<ul class="navbar-nav ms-auto my-2 my-lg-0">
<li class="nav-item"><a class="nav-link" href="#about">about</a></li>
<li class="nav-item"><a class="nav-link" href="#services">services</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio">portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">contact</a></li>
</ul>
</div>
</div>
<div class="container px-12 px-lg-12 text-center col-lg-12">
<a class="navbar-brand" href="#" style="width:450px">
<i class="bi bi-telephone"></i>
</a>
<a class="navbar-brand" href="#" style="width:450px">
<i class="bi bi-telephone"></i>
</a>
<a class="navbar-brand" href="#" style="width:450px">
<i class="bi bi-telephone"></i>
</a>
</div>
</nav>

问题根源 #

1. Navbar默认flex布局影响：在桌面端（navbar-expand-lg生效时），navbar默认是横向flex容器，两个同级的container会被自动并排显示，导致第二个容器只能分到一半宽度。
2. 容器与栅格列类混用错误：col-lg-12是栅格列类，必须放在row容器内才生效，直接和container混用无效，container本身就是负责提供最大宽度和内边距的容器，不需要额外用col类控制宽度。
3. 固定宽度导致溢出：给navbar-brand设置固定width:450px，会导致小屏幕下内容溢出，同时也会挤压容器宽度。

修正方案 #

给导航栏添加垂直flex布局，强制元素堆叠，修正容器与栅格的混用问题，移除固定宽度：

<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3 flex-column" id="mainnav">
  <!-- 第一行导航内容 -->
  <div class="container px-4 px-lg-5">
    <a class="navbar-brand" href="#page-top">start bootstrap</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarresponsive" aria-controls="navbarresponsive" aria-expanded="false" aria-label="toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarresponsive">
      <ul class="navbar-nav ms-auto my-2 my-lg-0">
        <li class="nav-item"><a class="nav-link" href="#about">about</a></li>
        <li class="nav-item"><a class="nav-link" href="#services">services</a></li>
        <li class="nav-item"><a class="nav-link" href="#portfolio">portfolio</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact">contact</a></li>
      </ul>
    </div>
  </div>

  <!-- 第二行图标内容 -->
  <div class="container px-4 px-lg-5 text-center py-2">
    <a class="navbar-brand mx-3" href="#">
      <i class="bi bi-telephone"></i>
    </a>
    <a class="navbar-brand mx-3" href="#">
      <i class="bi bi-telephone"></i>
    </a>
    <a class="navbar-brand mx-3" href="#">
      <i class="bi bi-telephone"></i>
    </a>
  </div>
</nav>

关键改动说明 #

• 给nav添加flex-column类：强制导航栏内部元素始终垂直堆叠，解决桌面端两个容器并排的问题。
• 移除第二个container上的col-lg-12：避免容器与栅格列类混用，container默认在对应断点下为100%宽度。
• 去掉navbar-brand的固定width:450px，改用mx-3类添加水平间距，防止内容溢出，同时保持元素居中排列。
• 给第二行容器添加py-2类，增加上下内边距，优化布局美观度。

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