我的導航欄不會居中

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