Question

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

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

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

我尝试过的方法：我可以将图标栏包裹在一个范围内，并使其内联，但这也增加了填充。即使只是在导航栏折叠按钮中放置简单的文本，也会在按钮和导航栏上添加底部填充。

关于如何在不影响导航栏高度的情况下向该按钮添加标签的任何建议？

Answer 1

您不能只在导航图标和标签上设置padding：0，还是给其固定高度吗？

Answer 2

技巧是将父元素的line-height设置为0。将元素从inline更改为block或inline-block时，将添加line-height。此处说明： Why does inline-block cause this div to have height?

因此，将line-height元素的button设置为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>

带有标签的Bootstrap导航栏切换汉堡包图标

2 个答案: