logo标签列表

在Bootstrap导航栏中添加可点击的帮助图标到菜单项

htmlcsstwitter-bootstraptwitter-bootstrap-3
3
我正在尝试添加可点击和Hover效果的小帮助图标，它们将漂浮在相应导航栏菜单项的右侧。我的问题是bootstrap以一种似乎不是快速简单任务的方式应用其样式。
我的图标可能会像这样（使用FontAwesome）：
<span class="navmenu-help-icon"><i class="fa fa-question-circle"></i></span>

我当前的LESS代码用于图标（基于a元素的样式）：

.navbar-nav > li > .navmenu-help-icon {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
    cursor: pointer;
    color: white;
    background-color: lighten(@navbar-inverse-bg, 20%);
}

我无法将链接和按钮包裹在一个
2个回答
4

我不确定这是否是您要查找的内容，但为什么不直接将图标放在a标签内，例如：<li><a href="#">帮助 <i class="fa fa-question-circle"></i></a></li>？

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Help <i class="fa fa-question-circle"></i></a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div><!--/.container-fluid -->
</nav>

根据评论更新（在移动布局中使用相同行图标和文本）

为了在桌面和移动视图中显示一个带有另一个链接的图标，我已经将类nav-iconitem添加到这些li中。这将把a标签从display: block更改为display: inline-block。 li应包含一个独立的a.nav-iconitem__text标记用于文本和一个a.nav-iconitem__icon用于图标。类nav-iconitem__text和.nav-iconitem__icon用于更改文本和图标之间的距离。

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');

.nav > li.nav-iconitem > a {
  display: inline-block;
}

.nav > li.nav-iconitem > a.nav-iconitem__text {
  padding-right: 0;
}

.nav > li.nav-iconitem > a.nav-iconitem__icon {
  padding-left: 0;
}
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="nav-iconitem"><a href="#" class="nav-iconitem__text">Help</a>
        <a href="#" class="nav-iconitem__icon"><i class="fa fa-question-circle"></i></a></li>
        <li><a href="#">Regular</a>        
      </ul>
    </div><!--/.nav-collapse -->
  </div><!--/.container-fluid -->
</nav>

评论更新（将图标浮动到右侧）

要使图标浮动到右侧，最简单的方法可能是将.nav-iconitem设置为position: relative，并将.nav-iconitem__icon设置为position: absolute，top: 0和right: 0。由于图标可能会重叠.nav-iconitem__text，您需要向.nav-iconitem添加一个固定大小的padding-right。

可能可以通过display: table实现此目标，但是由于表格倾向于增长，您可能仍然需要在某个地方使用固定宽度。我更喜欢将图标的宽度固定而不是包含文本的容器的宽度固定。

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');

.nav > li.nav-iconitem {
  display: relative;
  padding-right: 30px;
}

.nav > li.nav-iconitem > a.nav-iconitem__text {
  padding-right: 0;
}

.nav > li.nav-iconitem > a.nav-iconitem__icon {
  position: absolute;
  top: 0;
  right: 0;
  padding-left: 0;  
}
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="nav-iconitem"><a href="#" class="nav-iconitem__text">Help</a>
        <a href="#" class="nav-iconitem__icon"><i class="fa fa-question-circle"></i></a></li>
        <li><a href="#">Regular</a>        
      </ul>
    </div><!--/.nav-collapse -->
  </div><!--/.container-fluid -->
</nav>

我最初并不想这样做，因为存在“点击”问题。这应该在移动设备上运行，并且我希望确保图标可以轻松点击，而不容易误点并导航到链接。但是我会仔细检查它，可能适当的填充量可以解决这个问题。 - Zoltán Tamási
啊，现在我明白了。这也使得在移动设备上使用不同的 li 作为帮助图标变得不可能，因为它会显示在新行而不是在“帮助”菜单项右侧。嵌套可点击区域似乎不是一个好的解决方案。 - ckuijjer
感谢更新，另一个问题是帮助图标应该“浮动”（我指的是视觉上）到右侧（或左侧），并且链接仍然填满整行。在您的示例中，链接变小了。我正要找到正确的解决方案，将图标放置在左侧，并使用display:table-cell将链接和图标跨度进行设置，并将width:99%设置为链接以通过LI跨度。如果您以这种方式更新您的答案，我会接受它，因为它很有激励性 :) - Zoltán Tamási
啊..我的解决方案也不正确，当在子菜单或折叠状态下时还好，但当在水平状态下用于顶级菜单时会出现问题。仍在进一步尝试中... - Zoltán Tamási
0

我的最终解决方案是在 LI 元素内使用 table-cell 显示模式来显示图标。为了简化问题，我允许将图标放在左侧。

以下是处理子菜单和折叠模式的 LESS 源代码。请注意，我使用了 Jasny Bootstrap 的 Offcanvas 导航栏，因此其中一些部分是针对该导航栏的。

.navbar {
    li.with-icon {
        & > a {
            display: table-cell;
            padding-left: 0;            
        }

        & > .navmenu-help-icon {
            display: table-cell;
            padding: @nav-link-padding;
            padding-right: 8px;
            line-height: 20px;
            cursor: pointer;
            color: white;
            font-size: 1em;
            //background-color: lighten(@navbar-inverse-bg, 20%);
        }
    }

    .dropdown-menu {
        li.with-icon {
            & > .navmenu-help-icon {
                display: table-cell;
                padding: 3px 10px;
            }

            & > a {
                width: 99%; // force spanning till right border
                padding-left: 0;
            }
        }
    }

    .offcanvas.canvas-slid {
        li.with-icon {
            & > .navmenu-help-icon {
                display: table-cell;
                padding: @nav-link-padding;                
            }

            & > a {
                width: 99%; // force spanning till right border
                padding-left: 0;
            }
        }
    }
}

而 HTML 标记看起来像这样：

<li class="with-icon">
   <span class="help-icon navmenu-help-icon" title="Some description"><i class="fa fa-question-circle"></i></span>
   <a href="#">The link</a>          
</li>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接