Twitter bootstrap 引导4导航栏将徽标居中对齐，并在左侧切换图标

我想使徽标居中，链接在导航栏的左侧，当它们在小型设备中折叠时，切换按钮应显示在左侧，此处显示在右侧，徽标应固定（无折叠）

Bootstrap 4导航栏使用flexbox，因此无需额外的CSS即可实现此功能。您将需要一个空的间隔div来保持徽标居中

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="collapse navbar-collapse w-100 order-1 order-lg-0" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
    </div>
    <div class="d-flex w-100 order-0">
        <div class="w-100">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        <a class="navbar-brand text-center w-100" href="#">Navbar</a>
        <span class="w-100"></span>
    </div>
    <span class="w-100"></span>
</nav>

左扳机，品牌中心：

相关：

---

当然，很抱歉，我应该早点加上去。所以基本上我们正在做的是将.navbar品牌移动到中间，给它一个0 auto的参数，并将.navbar折叠（我们菜单的项目）调整到左边，从nav顶部给它10px的空间。然后使用一个只在767 px开始工作的媒体查询，我们将Navar品牌缩小，所以它总是在中间，现在我们调整菜单栏图标（菜单图标），就像我们在菜单项上做的一样，现在得到默认的位置，给他们下面的样式：位置：继承； 然后我还将navbar expand sm类修改为navbar expand md，以更改断点

.navbar品牌{
保证金：0自动；
}
.导航栏倒塌{
位置：绝对位置；
顶部：10px；
}
@介质（最大宽度：767px）{
.navbar品牌{
文本对齐：居中；
}
.导航杆切换器{
位置：绝对位置；
顶部：10px；
}
.导航栏倒塌{
职位：继承；
}
}

它解决了小型设备的问题，但在中型和大型设备中，徽标仍然位于左侧，但没有居中。我想我无法向您明确说明问题…徽标始终应位于中心，无论显示大小如何。在codeply中观看输出时，它正是我想要的，但在我的浏览器（chrome）中不起作用答案是使用css。你试过在chrome上运行你的代码吗？我已经发布了工作代码和示例。这个问题基本上是一堆其他问题的重复。它起作用了。你能给我解释一下，让我能理解代码吗？@MdFaysalAhmedAkash，如果不清楚，请告诉我，如果我的英语不太好，请接受我的道歉。@MdFaysalAhmedAkash，我很抱歉，请让我知道哪一部分不太清楚，我会尽我所能更好地解释位置：绝对和位置：继承与您的答案我无法添加左右两侧的链接。它只出现在左侧为什么？

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="collapse navbar-collapse w-100 order-1 order-lg-0" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
    </div>
    <div class="d-flex w-100 order-0">
        <div class="w-100">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        <a class="navbar-brand text-center w-100" href="#">Navbar</a>
        <span class="w-100"></span>
    </div>
    <span class="w-100"></span>
</nav>