我的导航栏不会居中

Question

我很难让导航栏居中。我希望整个导航栏总是位于屏幕的底部，而标志位于中间，然后是两侧的两个按钮，跨越屏幕的边缘。

这里是我目前拥有的代码：

.navigation { 
 
    font-size: 40px; 
 
    font-family: Roboto-Light; 
 
    color: black; 
 
}

<nav class="navbar"> 
 
    <div class="container"> 
 
    <div class="navbar-nav nav-justified"> 
 
     <a class="navigation videoHub nav-item nav-link" href="#">VIDEO HUB</a> 
 
     <a class="navigation aboutSean nav-item nav-link" href="#">ABOUT SEAN</a> 
 
     <a class="navigation foleyLogo nav-item nav-link" href="#"> 
 
     <img src="../Foley Performance Video Website Layout/FoleyPerformanceLogo.jpg" alt="Foley Logo" style="width:200px;" /> 
 
     </a> 
 
     <a class="navigation schedule nav-item nav-link" href="#">SCHEDULE</a> 
 
     <a class="navigation askSean nav-item nav-link" href="#">ASK SEAN</a> 
 
    </div> 
 
    <!-- navbar-nav --> 
 
    </div> 
 
    <!-- Container --> 
 
</nav> 
 
<!-- Navbar -->

我的印象是，随着新的自举4，使用导航对齐或导航填充会做的工作对我来说，就像在教学视频

Answer 1

Bootstrap 4有built in utilities你可以使用。

<div class="navbar-nav mx-auto"> 
    ... 
</div> 

例如类mx-auto上导航栏-NAV的x轴，这应集中的项目自动增加余量。

.navigation { 
 
    font-size: 15px; 
 
    font-family: Roboto-Light; 
 
    color: black; 
 
} 
 

 
.navbar-nav { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-around; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <nav class="navbar navbar-toggleable-xl "> 
 
     <div class="container"> 
 
     <div class="navbar-nav mx-auto"> 
 
      <a class="navigation videoHub nav-item nav-link" href="#">VIDEO HUB</a> 
 
      <a class="navigation aboutSean nav-item nav-link" href="#">ABOUT SEAN</a> 
 
      <a class="navigation foleyLogo nav-item nav-link" href="#"> 
 
      <img src="../Foley Performance Video Website Layout/FoleyPerformanceLogo.jpg" alt="Foley Logo" style="width:100px;" /> 
 
      </a> 
 
      <a class="navigation schedule nav-item nav-link" href="#">SCHEDULE</a> 
 
      <a class="navigation askSean nav-item nav-link" href="#">ASK SEAN</a> 
 
     </div> 
 
     <!-- navbar-nav --> 
 
     </div> 
 
     <!-- Container --> 
 
    </nav>

Answer 2

发现了来自@布赖恩一些帮助的答案！ 我在他的解决方案中添加了{flex-grow：3}，这有助于间距。 然后，我宣布徽标图像的大小，并将其设置为内联块元素，并使整个navbar-nav与图片的行高相同。

解决代码如下：（字体大小和图像大小进行缩放以适应这里）

.navigation { 
 
    font-size: 15px; 
 
    font-family: Roboto-Light; 
 
    color: black; 
 
} 
 

 
.navbar-nav { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-around; 
 
} 
 

 
.navbar-nav a:nth-of-type(1) { 
 
    flex-grow: 3; 
 
} 
 

 
.navbar-nav a:nth-of-type(2) { 
 
    flex-grow: 3; 
 
} 
 

 
.navbar-nav a:nth-of-type(3) { 
 
    flex-grow: 3; 
 
} 
 

 
.navbar-nav a:nth-of-type(4) { 
 
    flex-grow: 3; 
 
} 
 

 
.navbar-nav a:nth-of-type(5) { 
 
    flex-grow: 3; 
 
} 
 

 
img.foleyPerformance { 
 
    display: inline-block; 
 
    width: 100px; 
 
} 
 

 
.navbar-nav .nav-link { 
 
    padding-top: 0; 
 
    padding-bottom: 0; 
 
    height: 100px; 
 
    line-height: 100px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-toggleable-xl"> 
 
    <div class="container" style="margin-left:50px; margin-right:50px; width:100%;"> 
 
    <div class="navbar-nav mx-auto"> 
 
     <a class="navigation videoHub nav-item nav-link" href="#">VIDEO HUB</a> 
 
     <a class="navigation aboutSean nav-item nav-link" href="#">ABOUT SEAN</a> 
 
     <a class="navigation foleyLogo nav-item nav-link" href="#"> 
 
     <img class="foleyPerformance" src="../Foley Performance Video Website Layout/FoleyPerformanceLogo.jpg" alt="Foley Logo" /> 
 
     </a> 
 
     <a class="navigation schedule nav-item nav-link" href="#">SCHEDULE</a> 
 
     <a class="navigation askSean nav-item nav-link" href="#">ASK SEAN</a> 
 
    </div> 
 
    <!-- navbar-nav --> 
 
    </div> 
 
    <!-- Container --> 
 
</nav> 
 
<!-- Navbar -->