Bootstrap navbar-toggle 带有标签的汉堡图标答案

【问题标题】：Bootstrap navbar-toggle hamburger icon with labelBootstrap navbar-toggle 带有标签的汉堡图标
【发布时间】：2018-12-21 17:03:45
【问题描述】：

我正在使用 Bootstrap 3。我正在使用标准的 navbar-toggle 类和 3 个带有类图标栏的 span 元素来切换小屏幕的菜单，如下所示： https://www.w3schools.com/Bootstrap/bootstrap_navbar.asp （部分：“折叠导航栏”）

我想在图标栏旁边添加一个标签，这样如果折叠菜单中有通知，我也可以在汉堡图标上显示它。

但是，每当我更改“汉堡”图标（icon-barspans）时，底部都会添加填充，这会使按钮占据更多高度，从而使导航栏占据更多高度。 .. 这很糟糕，我不想改变导航栏的高度。

我尝试过的事情：我可以将图标栏包装在一个跨度中并使其成为内联块，但这也增加了填充。即使只是在导航栏折叠按钮中放置简单的文本，也会为按钮和导航栏添加底部填充。

有什么建议可以在不影响导航栏高度的情况下向此按钮添加标签吗？

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 responsive-design

【解决方案1】：

你不能在导航图标和标签上设置 padding: 0，或者给它一个固定的高度吗？

【讨论】：

【解决方案2】：

诀窍是将父元素的line-height 设置为0。当元素从inline 更改为block 或inline-block 时，line-height 会添加到其中。这在这里解释： Why does inline-block cause this div to have height?

因此，将button 元素的line-height 设置为0 解决了我的问题：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#something" style="line-height: 0px;">
   <span style="display: inline-block;">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
  </span>
  <!-- Any other code (eg: label) that you want inline -->
</button>

【讨论】：