在bootstrap汉堡包图标的左侧添加电话和地图图标

Question

我有一个基本的bootstrap v3网站。当导航栏切换到较小屏幕上的汉堡包图标时，我想添加一个电话图标（链接到电话号码）和一个地图图标（链接到谷歌地图），以便移动用户可以轻松访问它们。我尝试在汉堡包左侧添加一个电话图标，方法是在.navbar-toggle按钮之前添加代码，但我无法弄清楚如何让它像汉堡图标一样响应。我可以定位它，但这并不能保持响应。

这是我目前的代码。我试图让它只使用手机图标，但我也想在它旁边放置一个地图图标。大多数样式都是从.nav-bar-toggle文件中的bootstrap.min.css类样式复制而来。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.navbar i {
  font-size: 200%;
  position: relative;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px
}

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="#"><img src="img/autohaus-logo.png" class="navbar-brand"></a>
      <a href="tel:phone-number"><i class="glyphicon glyphicon-phone"></i></a>
      <button class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse">                    
        <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>
</nav>

Answer 1

如何将不可折叠的图标添加到Bootstrap Navbar

让我们使用Bootstrap文档中的Default navbar。

1. 在<ul class="nav navbar-nav"><li></li></ul>块的末尾添加<div class="navbar-header">结构。此结构不会在窄屏幕上折叠。
2. 将the visible-xs class添加到<ul>标记。然后它只能在狭窄的屏幕上看到。
3. 添加图标作为此结构的项目。
4. 将the pull-right class添加到每个<li>代码中。这些项目将放置在切换按钮附近。

请检查结果。这是你想要实现的目标吗？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<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-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
      <ul class="nav navbar-nav visible-xs">
        <li class="pull-right"><a href="tel:phone-number"><i class="glyphicon glyphicon-phone"></i></a></li>
        <li class="pull-right"><a href="#"><i class="glyphicon glyphicon-map-marker"></i></a></li>
      </ul>
    </div>

    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Left</a></li>
        <li><a href="#">Left</a></li>
        <li><a href="#">Left</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Right</a></li>
        <li><a href="#">Right</a></li>
        <li><a href="#">Right</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>