在引导程序汉堡图标的左侧添加电话和地图图标

Posted 2023-03-06

【中文标题】在引导程序汉堡图标的左侧添加电话和地图图标

【英文标题】：Adding a phone and map icon to the left of the bootstrap hamburger icon

【发布时间】：2016-10-21 00:05:45

【问题描述】：

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

这是我当前的代码。我试图让它只使用电话图标，但我也希望在它旁边放置一个地图图标。大部分样式都是从bootstrap.min.css 文件中的.nav-bar-toggle 类样式复制而来的。

@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>

【参考方案1】：

如何向 Bootstrap 导航栏添加不可折叠的图标

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

在<div class="navbar-header"> 块的末尾添加<ul class="nav navbar-nav"><li></li></ul> 结构。这种结构不会在狭窄的屏幕上折叠。 将the visible-xs class 添加到<ul> 标记。然后它将仅在窄屏幕上可见。 添加图标作为此结构的项目。 将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>

【讨论】：

解决了！我使用了 visible-xs 和 pull-right 类来获得我想要的。谢谢！

@brando 很高兴为您服务！ Do accept my answer 如果对你有帮助的话。