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-*在品牌或汉堡包菜单图标下保持对齐但是我希望它能够坚持下去在汉堡包图标的左侧，不要乱七八糟。

以下是我所拥有的最新版本：

 <nav class="navbar navbar-expand-lg fixed-top scrolling-navbar indigo"> <div class="container">  <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是＆＃34;保证金权利3单位＆＃34;给它一点间距。

这是一个正常工作的代码段（点击＆＃34;运行代码段＆＃34;然后展开到整页）：

＆＃13;

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

＆＃13;

请注意，我在上面的代码段中使用了一个干净整洁的导航栏，因为您的代码有点混乱。所以，从这个干净的片段开始，然后逐个添加您的自定义部分，确保您的添加内容不会破坏任何内容。

Bootstrap hamburger图标左侧的Bootstrap v4 uncollapsible图标

1 个答案: