Bootstrap 4导航栏无法正常显示，请求排查问题原因

问题描述 #

我正尝试用Bootstrap 4制作导航栏，但代码无法正常运行。我的代码几乎完全复刻了官方教程，仅对nav-brand部分做了少量修改。当前导航项堆叠在品牌标识下方，无法横向排列，请问我哪里出错了？

我的代码：

<nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="/">
    <img src="/assets/logo/logo.svg" width="30" height="30" class="d-inline-block align-top"
        alt="">
    <b class="hojasdeplata">Fourteen Trees</b>
</a>
<ul class="navbar-nav">
    <li class="nav-item active">
        <a class="nav-link" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
    </li>
</ul>
</nav>

问题原因及解决方法 #

你的代码缺少两个Bootstrap 4导航栏的核心结构类，导致布局异常：

1. 缺少导航栏展开类：Bootstrap 4导航栏默认在小屏幕下堆叠，需要添加.navbar-expand-*类（如.navbar-expand-lg），控制导航栏在指定屏幕尺寸以上横向展开。
2. 导航列表未放入折叠容器：导航项列表需要包裹在.navbar-collapse容器中，配合响应式切换按钮实现不同屏幕下的布局适配，同时可通过.ml-auto类让导航项靠右对齐。

修正后的完整代码 #

<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="/">
    <img src="/assets/logo/logo.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    <b class="hojasdeplata">Fourteen Trees</b>
  </a>
  <!-- 移动端导航切换按钮 -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

补充说明 #

• .navbar-expand-lg：表示屏幕宽度≥992px时导航栏横向展开，小屏幕下自动折叠为汉堡按钮，可根据需求替换为-sm/-md/-xl适配不同尺寸。
• .ml-auto：让导航列表靠右对齐，若需导航项靠左，移除该类即可。
• 确保页面已正确引入Bootstrap 4的CSS文件，以及jQuery、Popper.js和Bootstrap JS文件，否则响应式切换按钮无法正常工作。

内容的提问来源于stack exchange，提问作者Kevin-Duel Trimble