Question

我正在使用此导航栏：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </div>
</nav>

我正在尝试将“Home”图标放在“Home”字样旁边并将其放在同一个灰色块中，我这样做：

<li class="active"><a href="main.php">Home</a><i class='glyphicon glyphicon-home'></i></li>

我试图将它放在几个地方但没有成功。

提前谢谢。

Answer 1

为什么不在锚标记内？

<li class="active">
  <a href="main.php">Home<i class='glyphicon glyphicon-home'></i></a>
</li>

演示：http://jsfiddle.net/dhirajbodicherla/urnb1wha/

如果您希望Home图标朝向极右，请将pull-right类用于这样的glyphicon

<li class="active">
  <a href="main.php">Home<i class='pull-right glyphicon glyphicon-home'></i></a>
</li>

演示：http://jsfiddle.net/dhirajbodicherla/urnb1wha/1/

引导。获取li navbar旁边的图标

1 个答案: