居中一个Navbar:Bootstrap 4

Question

我试图将项目集中在我的纳维托中，但无论我做什么，这些项目都粘在左边。在某一时刻，我可以通过在ML-Auto，MX-Auto和Auto Mr-Auto之间切换到右侧或向左移动半英寸。现在，即使我这样做，也没有任何动作。我不确定我做了什么。

ive已经尝试了其他帖子中的几个代码示例，但它们都没有起作用。我对代码相对较新，所以我不确定是什么破裂。

iv'e尝试将d-flex义务中心添加到navbar-collapse，证明内容以"崩溃的Navbar-Collapse"为中心，并在其他帖子中提出了其他一些建议。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><img src="img/logo3.png" style="width:13%;" ;></a>
    <button class="navbar-toggler" type="button" data- toggle="collapse" data-target="#navbarResponsive">
    		 <span class="navbar-toggler-icon"></span>
    	        </button>
    <div class="collapse navbar-collapse d-flex justify-content-center" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">home</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

据我所知，我的CSS目前没有任何目标。

我只希望NAV项目在Navbar的中间。

Answer 1

从ul标签中删除ml-auto CSS类。

在 css

中添加此添加

.navbar-brand {
   position: absolute !important;
}

Answer 2

这对我有用： <div class="collapse navbar-collapse d-flex" id="navbarResponsive">和 <ul class="navbar-nav mx-auto">。

/* Nesessary for the logi i use
    You might not need it
*/
.navbar-brand img {
  width: 64px;
  height: auto;
}
/* To keep the nav items
* centered and full width
* on mobile phones
*/
@media (max-width: 575px) {  
 .navbar-nav {
    width: 100%;
  }
  .navbar-nav li {
    text-align: center;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><img src="https://i.stack.imgur.com/SENHZ.png" ;></a>
    <button class="navbar-toggler" type="button" data- toggle="collapse" data-target="#navbarResponsive">
    		 <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse d-flex" id="navbarResponsive">
      <ul class="navbar-nav mx-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">home</a>
        </li>
      </ul>
    </div>
  </div>
</nav>