Question

我希望通过“ 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/

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

Answer 2

删除.nav-masthead的浮动

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

或删除class上的HTML

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

居中Navbar引导程序4

2 个答案: