如何使用下面的导航链接在 Bootstrap 4 中居中导航栏徽标答案

【问题标题】：How to centre navbar logo in Boostrap 4 with nav-links below如何使用下面的导航链接在 Bootstrap 4 中居中导航栏徽标
【发布时间】：2018-09-08 08:19:51
【问题描述】：

我似乎无法让导航栏徽标居中与其下方的导航链接中心对齐。我确定我遗漏了一些简单的东西，我已经查看了有关此问题的其他一些帖子，但似乎都在使用旧版本的引导程序。我目前正在使用引导程序 4.0。

具体来说，我希望徽标位于单独的一行，而不是与链接在同一行。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="img/h-tech-logo-cropped.png"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Our Services</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About Us</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Gallery</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Contact Us</a>
    </li>
  </ul>
</div>

【问题讨论】：

喜欢this ?
是的，就像那样。我的问题已被标记为重复，但我不希望徽标像您展示的那样位于单独的行中。
@ZimSystem 这个问题不是重复的。它想要做一些与上述副本中建议的完全不同的事情。
This question is being discussed on meta.
我已经重新打开了，但我认为方法与其他问题相同。看起来好像没有任何努力使链接居中或将内容放在单独的行上。

标签： html css twitter-bootstrap bootstrap-4 navbar

【解决方案1】：

这是一个使用 flexbox 和 auto-margin 实用程序的问题，如许多其他“Bootstrap 4 Navbar Center”问题中所述...

导航栏是display:flex，所以使用flex-column来制作内容栈
使用mx-auto 将x 轴边距自动居中。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" 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" ></script>

<nav class="navbar navbar-expand navbar-light bg-light flex-column">
    <a class="navbar-brand mx-auto" href="#"><img src="img/h-tech-logo-cropped.png"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Our Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Gallery</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Contact Us</a>
            </li>
        </ul>
    </div>
</nav>

Responsive demo on Codeply

【讨论】：

是的，非常感谢。我想我可能很难使用正确的搜索词。我对堆栈溢出还很陌生，所以我一定会努力更好地检查现有帖子。