如何使用Bootstrap 4创建带SVG图标的导航菜单？

嘿，你已经有了不错的起步，咱们来把这个导航栏调整得更贴近你想要的设计效果，同时遵循Bootstrap 4的最佳实践～

首先，你当前的代码里自定义了navbar-item，其实可以利用Bootstrap原生的导航组件来更高效地实现均匀分布和垂直排版的效果，而且不用手动设置固定宽度也能达到规整的视觉体验。

优化后的完整代码 #

HTML部分

<div class="row justify-content-center">
  <div class="col-sm-10">
    <nav class="navbar navbar-expand border-bottom border-primary border-2">
      <ul class="navbar-nav w-100 justify-content-around">
        <li class="nav-item">
          <a class="nav-link active d-flex flex-column align-items-center" href="#">
            <img src="../images/icons/icon-type-blue.svg" alt="Type">
            <span class="mt-2">Type</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link d-flex flex-column align-items-center" href="#">
            <img src="../images/icons/icon-size-lightgrey.svg" alt="Size">
            <span class="mt-2">Size</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link d-flex flex-column align-items-center" href="#">
            <img src="../images/icons/icon-fitting-lightgrey.svg" alt="Fitting">
            <span class="mt-2">Fitting</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link d-flex flex-column align-items-center" href="#">
            <img src="../images/icons/icon-results-lightgrey.svg" alt="Results">
            <span class="mt-2">Results</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

CSS部分

.navbar {
  padding: 2em 0; /* 保留上下内边距，左右间距由父容器控制 */
}

.nav-link {
  font-size: 1.25em;
  font-weight: 700;
  text-transform: uppercase;
  color: #ccc;
}

.nav-link.active {
  color: #00588A;
}

/* 可选：统一图标尺寸，让视觉更整齐 */
.nav-link img {
  width: 48px;
  height: auto;
}

关键优化点说明 #

1. 用Bootstrap原生组件：
   换成navbar-nav和nav-item是Bootstrap的标准用法，自带基础样式和响应式支持，比自定义类更可靠。
2. 实现均匀分布：
   给navbar-nav加上w-100（占满父容器宽度）和justify-content-around（子元素均匀分布，左右留白），不用手动设置固定宽度也能让导航项整齐铺开，适配不同屏幕尺寸。
3. 垂直排版图标和文字：
   给每个nav-link加上d-flex flex-column align-items-center，让图标在上、文字在下且居中对齐，完美匹配你想要的设计。
4. 关于固定尺寸的疑问：
   固定宽度确实能让每个导航项的点击区域完全一致，但用justify-content-around的方式在响应式场景下更灵活——比如小屏幕时会自动调整间距。如果你的图标大小不一，或者追求绝对一致的宽度，可以给.nav-item加flex: 0 0 25%（四个项各占25%），不过一般来说用flex布局的自动分布已经足够。

最后，记得给SVG图标加上alt属性，提升可访问性哦～

内容的提问来源于stack exchange，提问作者Elizabeth C.