如何使用Flexbox在Bootstrap 4中居中導航欄

那麼，我想要實現這件事：https://i.imgur.com/BDM7JvD.jpg使用Bootstrap 4導航欄。如何使用Flexbox在Bootstrap 4中居中導航欄

如何使用flexbox或mr-auto等公用程序集中視口中間的導航鏈接/項目。我試圖避免使用基於CSS的定位方法，因爲它可能會在不同的設備上顯示。但是，如果CSS方法承諾處於相同的集中位置，那麼爲什麼不呢！

注意：某些ppl可能會說使用justify實用程序，但是您不能將它們用作navbar品牌，並且navbar-nav不能包裝在div中。如果我這樣做，佈局混亂了。

導航類= 「導航欄導航欄，可切換-MD導航欄光BG-定製卡陰影下」>

 <div class="container"> 

      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
       <span class="navbar-toggler-icon"></span> 
      </button> 

      <a class="navbar-brand" href="#"><img src="img/nav-logo.png" alt="logo" class="nav-logo"></a> 

      <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
       <ul class="navbar-nav ml-auto mr-auto"> 
        <li class="nav-item"> 
         <a class="nav-link" href="#">Home</a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link" href="#">Link</a> 
        </li> 
        <li class="nav-item"> 
         <a class="nav-link" href="#">Disabled</a> 
        </li> 
       </ul> 
      </div> 

     </div> 

    </nav>

來源

2017-02-11 Parker Queen

我編輯了qs，我試圖添加先生和ml - 汽車，但它不工作。此外，我還試圖通過包裝品牌div和nav-item div來使用網格，但隨後導航項被強制轉到下一行。幫助 –

代碼與圖像不匹配。怎麼樣在右邊的圖標？看起來你剛剛從文檔中粘貼了navbar示例。 – ZimSystem

我給出的圖像來自於我正在嘗試實現的模板...沒有顏色和樣式，只是該導航欄的佈局。 –

使用Flexbox的工具來對齊組件你想要的方式。

<nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-inverse bg-primary justify-content-between"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <a href="/" class="navbar-brand">Brand</a> 
    <div class="navbar-collapse collapse justify-content-center" id="collapsingNavbar"> 
     <ul class="navbar-nav"> 
      <li class="nav-item active"> 
       <a class="nav-link" href="#">Link <span class="sr-only">Home</span></a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Link</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#" data-toggle="collapse">Link</a> 
      </li> 
     </ul> 

    </div> 
    <ul class="nav navbar-nav flex-row"> 
     <li class="nav-item"><a class="nav-link pr-3" href=""><i class="fa fa-facebook"></i></a></li> 
     <li class="nav-item"><a class="nav-link" href=""><i class="fa fa-twitter"></i></a></li> 
    </ul> 
</nav>

http://www.codeply.com/go/kTGlK9Axdk

更新引導4.0.0

navbar-toggleable-sm現在navbar-expand-md
navbar-inverse現在是navbar-dark
navbar-fixed-top現在fixed-top

來源

2017-02-11 15:40:34 ZimSystem

謝謝，正是我想要的 –

如何使用Flexbox在Bootstrap 4中居中導航欄

回答

相關問題