居中导航栏 Bootstrap 4 [重复]答案

【问题标题】：Centering Navbar Bootstrap 4 [duplicate]居中导航栏 Bootstrap 4 [重复]
【发布时间】：2019-05-25 09:14:31
【问题描述】：

我希望将“Cover”Bootstrap 4 模板中的导航栏居中。当前代码如下。

<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
  <header class="masthead mb-auto">
    <div class="inner">
      <nav class="nav nav-masthead justify-content-center">
        <a class="nav-link active" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Contact</a>
      </nav>

    </div>

  </header>

Preview

网站链接 - https://wojakbot-64140.firebaseapp.com/

【问题讨论】：

标签： html css bootstrap-4 navbar center

【解决方案1】：

将mr-auto, ml-auto 添加到.masthead

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
  <header class="masthead mb-auto mr-auto ml-auto">
    <div class="inner">
      <nav class="nav nav-masthead justify-content-center">
        <a class="nav-link active" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Contact</a>
      </nav>

    </div>

  </header>
</div>

【讨论】：

完美运行！谢谢

【解决方案2】：

删除.nav-masthead的浮动

.nav-masthead {
    /*float: right;*/
}

或删除HTML 上的class

<header class="masthead mb-auto"> 
    <div class="inner">
      <nav class="nav justify-content-center"> <!-- remove class "nav-masthead" -->
        <a class="nav-link active" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Contact</a>
      </nav>

    </div>

  </header>

【讨论】：

谢谢！它工作得很好，出于某种原因，我必须在更新之前清除我的缓存。我之前尝试过删除浮动，所以我尝试清除缓存并且成功了！