在 Bootstrap 5 导航栏中向图标添加文本答案

【问题标题】：Add text to icon in Bootstrap 5 navbar在 Bootstrap 5 导航栏中向图标添加文本
【发布时间】：2021-03-23 01:46:20
【问题描述】：

这可能是一个愚蠢的问题，但我无法真正弄清楚。如何向图标导航栏添加文本，如here?

下面是我的导航栏；我正在使用基本的 Bootstrap CSS。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Navbar start-->
    <nav class="navbar fixed-bottom navbar-dark navbar-expand bg-dark">
        <div class="container-fluid">
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav position-relative start-50 translate-middle-x">
                    <li class="nav-item active">
                        <a class="nav-link" aria-current="page" href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24" height="24"><path d="M12.5 7.25a.75.75 0 00-1.5 0v5.5c0 .27.144.518.378.651l3.5 2a.75.75 0 00.744-1.302L12.5 12.315V7.25z"></path><path fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z"></path></svg></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24" height="24"><path d="M2.5 2.75a.75.75 0 00-1.5 0v18.5c0 .414.336.75.75.75H20a.75.75 0 000-1.5H2.5V2.75z"></path><path d="M22.28 7.78a.75.75 0 00-1.06-1.06l-5.72 5.72-3.72-3.72a.75.75 0 00-1.06 0l-6 6a.75.75 0 101.06 1.06l5.47-5.47 3.72 3.72a.75.75 0 001.06 0l6.25-6.25z"></path></svg></a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- Navbar end-->

【问题讨论】：

标签： bootstrap-4 navbar bootstrap-5

【解决方案1】：

有几种方法可以解决这个问题。一种方法是使导航链接 flex 列和 (d-flex flex-column) 在单独的跨度中添加文本...

      <li class="nav-item">
           <a class="nav-link d-flex flex-column align-items-center" href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24" height="24">
                        ...
              </svg>
              <span class="small">text</span>
           </a>
      </li>

Demo

【讨论】：