Bootstrap 4 导航栏将徽标中心对齐并在左侧切换图标

Question

我想让徽标居中，链接位于导航栏的左侧，当它们在小型设备中折叠时，切换按钮应出现在左侧，此处出现在右侧，并且徽标应固定（不折叠）

<nav class="navbar navbar-expand-sm navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" 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>
</nav>

Answer 1

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>

左侧切换器，品牌中心：
https://www.codeply.com/go/VfuMAtIoXi

相关：
如何在 Bootstrap 中居中导航项？
Bootstrap NavBar 具有左对齐、居中或右对齐的项目