如何在Bootstrap移动端菜单按钮内添加文字？

嘿，这个需求其实很容易搞定，咱们直接对现有代码做些小修改就能实现。下面是具体的步骤和示例：

1. 基础修改：直接插入文字 #

你可以在navbar-toggle按钮内部，三个icon-bar的前后添加一个包含文字的元素（比如<span>），同时别忘了保留sr-only的辅助文本——这是给屏幕阅读器用的，能保证页面的可访问性。

修改后的按钮代码：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="menu-text">菜单</span> <!-- 新增的菜单文字 -->
</button>

2. 样式优化：让文字和图标对齐更美观 #

默认情况下，文字和图标可能排列得不够整齐，你可以加一点自定义CSS来调整布局和样式：

.navbar-toggle .menu-text {
  margin-left: 8px; /* 给文字和图标之间留出间距 */
  color: #333; /* 根据网站主题调整文字颜色 */
  vertical-align: middle; /* 让文字和图标垂直居中对齐 */
  font-size: 14px; /* 按需调整文字大小 */
}

3. 进阶布局：文字和图标上下排列 #

如果你想要文字在图标上方（或下方），可以把图标和文字分组，用flex布局控制排列方向：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
  <span class="sr-only">Toggle navigation</span>
  <div class="icon-group">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </div>
  <span class="menu-text">菜单</span>
</button>

对应的CSS：

.navbar-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px; /* 图标组和文字之间的间距 */
}

你可以根据自己的设计需求，灵活调整文字内容和样式细节，就能轻松实现带文字的移动端菜单按钮啦。

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