Bootstrap 4徽标在桌面上的位置中心

Question

我对bootstrap 4响应式导航栏有问题。在较小的屏幕上可以正常工作（中间的徽标，右侧的汉堡包菜单） 在较大的屏幕（桌面）上，将徽标和登录按钮推到页面的左侧时，会出现此问题。徽标应位于文本结尾的绝对中心和登录按钮处。我尝试使用flexbox，但无法获得理想的效果。

<nav class="navbar navbar-expand-lg navbar-dark">
  <a class="navbar-brand brand text-center mx-auto" href="#">
    <h2>LOGO</h2>
    <h5>title</h5>
  </a>
  <button class="navbar-toggler custom-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="#">LOGIN</a>
      </li>
    </ul>
  </div>
</nav>

可用于代码https://www.codeply.com/go/uYvbe1Hsdh的整个代码。

Answer 1

您需要使用一个空的spacer元素，以便 flexbox 项（导航栏内容）在导航栏中均匀分布。这将使徽标居中。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <div class="flex-grow-1"><!--spacer--></div>
        <a class="navbar-brand brand text-center company mx-auto flex-grow-1" href="#">
            <h2>GRADBENI E-DNEVNIK</h2>
            <h5>ELEKTRONSKI GRADBENI DNEVNIK</h5>
        </a>
        <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse flex-grow-1" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">PRIJAVA</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="container">
    <p>3 wolf moon retro jean shorts chambray sustainable roof party. Shoreditch vegan artisan Helvetica. Tattooed Codeply Echo Park Godard kogi, next level irony ennui twee squid fap selvage. Meggings 
flannel Brooklyn literally small batch, mumblecore PBR try-hard kale chips. Brooklyn vinyl lumbersexual bicycle rights, viral 
fap cronut leggings squid chillwave pickled gentrify mustache. 3 wolf moon hashtag church-key Odd Future. Austin messenger bag normcore, 
Helvetica Williamsburg sartorial tote bag distillery Portland before they sold out gastropub taxidermy Vice.</p>
</div>

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

相似的问题：
Center an element in Bootstrap 4 Navbar
Bootstrap NavBar with left, center or right aligned items