Bootstrap 4 Navbar将徽标中心对齐并在左侧切换图标 [英] Bootstrap 4 Navbar align logo center and toggle icon on the left

问题描述

我要使徽标居中，并在导航栏中左侧显示链接，当它们在小型设备中折叠时，切换按钮应出现在左侧，此处出现在右侧，并且徽标应固定(否崩溃)

i want to make the logo centered and links on the left side in the navbar and when they collapse in small devices the toggle button should appear in the left side,here appears on the right side and the logo should be fixed(no collapse)

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

推荐答案

Bootstrap 4导航栏使用flexbox，因此可以实现而无需额外的CSS .您将需要一个空白的div间隔以使徽标居中.

The Bootstrap 4 Navbar uses flexbox, so it's possible to achieve this without extra CSS. You will need an empty spacer div to keep the logo centered.

<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中将nav项居中?
Bootstrap NavBar具有左，中或右对齐项

Related:
How to center nav-items in Bootstrap?
Bootstrap NavBar with left, center or right aligned items

这篇关于Bootstrap 4 Navbar将徽标中心对齐并在左侧切换图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！