自舉4（阿爾法6）品牌GET的居中並toggler

當Bootrap 4使用導航欄和容器（阿爾法6）等自舉4（阿爾法6）品牌GET的居中並toggler

<nav class="navbar navbar-static-top navbar-toggleable-md navbar-light bg-faded"> 

<div class="container"> 

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar-toggler-div" aria-controls="navbar-toggler-div" aria-expanded="false" aria-label="Navigation"> 
     <i class="fa fa-bars"></i> 
    </button> 

    <a class="navbar-brand" href="/"> 
     Band name here 
    </a> 

    <div class="collapse navbar-collapse" id="navbar-toggler-div"> 

     <ul class="navbar-nav"> 

      <li class="nav-item"> 
       <a class="nav-link" href="#">Foo</a> 
      </li> 

      <li class="nav-item"> 
       <a class="nav-link" href="#">Bar</a> 
      </li> 

     </ul> 

    </div> 

</div>

並且當屏幕是非常小的重疊（類似手機）的品牌標誌/文（無所謂）和toggler *獲取中心 *做重疊（toggler不是旁邊的品牌，但「開」的話）

這也適用於其他的導航欄類型（固定-top，默認）。

在導航元素後移除「容器」時，一切都很好。

我需要容器div有一個全寬的導航欄，但它本身「居中」（如下面的內容）。

來源

2017-01-25 Schubi Duah

你可以創建一個你的問題工作小提琴嗎？我在這裏創建了一個bs4a6 nav模板：https://jsfiddle.net/80ktkq37/ – Escher

https://jsfiddle.net/p47Lqb9f/ –

答案適合你嗎？如果是這樣，不要忘記點擊接受按鈕。 – Escher

您的<nav>菜單中有一個額外的<div class="container"> flexbox容器，該容器不應該存在，因此引導程序會嘗試自動將所有項目對齊到中心。刪除那div，它的工作原理。

，這裏是你撥弄<div class="container">刪除更新： https://jsfiddle.net/p47Lqb9f/1/

來源

2017-01-25 13:19:49 Escher

準確地說這個容器是需要的，看到我原來的帖子：」我需要容器div有一個全寬的導航欄，但它本身「居中」（如下面的內容）。「 –

我可以通過添加以下CSS的容器

@media (max-width: 576px) { 
    nav .container { 
     width: 100%; 
    } 
}

@Escher「解決」這個參數：.container後的資產淨值也在BS 4的官方CSS中，以及在他們的文檔中。所以我相信它是有意的。

來源

2017-01-26 07:27:55

這工作得很好......謝謝！ – JohnnyDevv

自舉4（阿爾法6）品牌GET的居中並toggler

回答

相關問題