Bootstrap 汉堡包图标左侧的 Bootstrap v4 不可折叠图标

Question

我遇到了 Bootstrap v4 问题。当导航栏切换到小屏幕上的汉堡图标时，我想添加一个电话图标，以便移动用户可以轻松使用它，而无需向下滚动到“联系人”部分。

我一直在尝试使用有关 navbar 的 Bootstrap 文档以及来自 Adding a phone and map icon to the left of the bootstrap hamburger icon（通过使用 d-md-none 而不是已过时的 visible-xs 将其调整为 Bootstrap v4）。此外，我已经通读并尝试了来自Bootstrap 4 align navbar item to the right 的每一个建议，与mr-*、ml-*、justify-*、float-* 一起玩，但没有成功 - 当我将视口大小调整到较小的屏幕时，图标出现但它仍然存在在品牌或汉堡菜单图标下对齐，具体取决于我使用的 - mr-* 或 ml-*，但我希望它贴在汉堡图标的左侧，不要乱来。

这是我所拥有的最新版本：

<!-- Navbar Start -->
  <nav class="navbar navbar-expand-lg fixed-top scrolling-navbar indigo">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <a href="index.html" class="navbar-brand"><img class="img-fluid" src="img/logo.png" alt=""></a>

    <ul class="navbar-nav d-md-none">
         <li class="nav-item ml-auto">
            <a class="nav-link page-scroll" href="tel:+1234567890"><i class="lnr lnr-phone-handset"></i></a>
         </li>
    </ul>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
          <i class="lnr lnr-menu"></i>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="main-navbar">
        <ul class="navbar-nav mr-auto w-100 justify-content-end">
          <li class="nav-item">
            <a class="nav-link page-scroll" href="#hero-area">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link page-scroll" href="#services">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link page-scroll" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>

Answer 1

解决此问题的一种方法是将手机图标放置在 HTML 中的导航栏品牌之后（以及切换器之前），然后将 d-block d-lg-none ml-auto mr-3 类添加到其中。

d-block 将默认显示它，即从最小的屏幕尺寸开始。 d-lg-none 将为大屏幕 (lg) 及以上的屏幕隐藏它。 ml-auto (margin-left:auto) 会将其推到右侧。而mr-3 是“margin-right 3 units”，给它一点间距。

这是一个工作代码sn-p（点击“运行代码sn-p”并展开到整页）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>

    <ul class="navbar-nav d-block d-lg-none ml-auto mr-3">
        <li class="nav-item">
            <a class="nav-link" href="tel:+1234567890"><i class="fa fa-mobile"></i></a>
        </li>
    </ul>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

请注意，我为上面的代码 sn-p 使用了一个全新、干净的导航栏，因为您的代码有点混乱。所以，从这个干净的 sn-p 开始，然后不断地添加您的自定义部分，确保您的添加不会破坏任何东西。

Answer 2

Bootstrap 4 中没有 navbar-header 类。而是这样做..

• 将navbar-brand 移出navbar-header
• 将navbar-header 更改为ml-auto d-flex flex-nowrap

这会将图标和汉堡放在右侧的一个不换行的 flexbox div 中。我还在电话图标 (mr-2) 的右侧添加了小边距，但这是可选的。

https://www.codeply.com/go/dLJ5GyyAQV

<nav class="navbar navbar-expand-lg fixed-top scrolling-navbar indigo navbar-dark">
    <div class="container">
        <a href="index.html" class="navbar-brand"><img class="img-fluid" src="//placehold.it/100x30" alt=""></a>
        <div class="ml-auto d-flex flex-nowrap">
            <ul class="navbar-nav d-md-none">
                <li class="nav-item ml-auto">
                    <a class="nav-link page-scroll mr-2" href="tel:+1234567890"><i class="fa fa-phone"></i></a>
                </li>
            </ul>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fa fa-bars"></i>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="main-navbar">
            <ul class="navbar-nav mr-auto w-100 justify-content-end">
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#hero-area">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link page-scroll" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>