首页 文章

带标签的Bootstrap navbar-toggle汉堡包图标

提问于
浏览 次
1

我正在使用Bootstrap 3.我使用标准的 navbar-toggle 类和3个 span 元素与类图标栏来切换小屏幕的菜单，如下所示：https://www.w3schools.com/Bootstrap/bootstrap_navbar.asp（section："Collapsing the Navbar"）

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

但是，每当我更改"hamburger"图标（ icon-bar span ）时，底部会添加填充，这会使按钮占用更多高度，从而使导航栏占用更多高度...这很糟糕，我想不要改变导航栏的高度 .

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

有关如何在不影响导航栏高度的情况下为此按钮添加标签的建议吗？

twitter-bootstrap twitter-bootstrap-3 responsive-design

2 回答

  • 0

    你不能只在导航图标和标签上设置填充：0，或者给它一个固定的高度？

    回复于
  • 0

    诀窍是将父元素的 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>
    回复于

相关问题