将电话和地图图标添加到bootstrap汉堡菜单图标左侧

Question

将电话和地图图标添加到bootstrap汉堡菜单图标左侧

htmlcsstwitter-bootstraptwitter-bootstrap-3navbar

7

我有一个基本的Bootstrap v3网站。当导航栏在较小的屏幕上切换到汉堡图标时，我想添加一个电话图标（链接到电话号码）和一个地图图标（链接到Google地图），以便移动用户可以轻松访问它们。我尝试在汉堡图标左侧添加电话图标，通过在.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>

- brando

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gleb Kemarsky · Accepted Answer

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

让我们使用Bootstrap文档中的默认导航栏。

在<div class="navbar-header">块的末尾添加<ul class="nav navbar-nav"><li></li></ul>结构。此结构在窄屏幕上不会折叠。
将visible-xs类添加到<ul>标签中。然后它只会在窄屏幕上显示。
将图标作为此结构的项目添加。
将pull-right类添加到每个<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>