如何让Bootstrap 5.3.0折叠按钮在简易网页中正常显示？

问题根源 #

• navbar-toggler 是Bootstrap导航栏的专属类，脱离navbar结构单独使用时，默认缺少必要的内边距、边框等样式，导致按钮显示异常
• navbar-toggler-icon 的颜色默认依赖导航栏上下文，在bg-primary的header中，白色文本与图标颜色冲突，导致图标不可见

解决方案 #

方案1：给按钮添加可见性样式

给navbar-toggler按钮添加背景色类，让按钮和蓝色header形成对比，图标会自动适配背景色：

<button class="navbar-toggler bg-white" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNav">
  <span class="navbar-toggler-icon"></span>
</button>

方案2：改用通用按钮类替代navbar-toggler

如果不需要导航栏风格的按钮，直接用Bootstrap通用的btn类配合折叠属性：

<button class="btn btn-light" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNav">
  展开菜单
</button>

完整修正代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<header class="bg-primary text-white text-center py-3">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="left-header">
          <h3>Left Header</h3>
        </div>
      </div>
      <div class="col-md-4">
        <div class="central-header">
          <h3>Central Header</h3>
        </div>
      </div>
      <div class="col-md-4 d-flex justify-content-end align-items-center">
        <div class="right-header">
          <!-- 修正后的折叠按钮 -->
          <button class="navbar-toggler bg-white" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNav">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
        <div class="collapse" id="collapsibleNav">
          <div class="card card-body">
            <ul class="nav">
              <li class="nav-item">Item 1</li>
              <li class="nav-item">Item 2</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

<main class="container mt-4">
  <h2>Main Content</h2>
  <p>This is the main content of the page.</p>
</main>

注：给右侧列添加d-flex justify-content-end align-items-center，让按钮垂直居中，优化布局美观度。

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