垂直對齊引導程序4導航欄摺疊按鈕

當導航欄的高度未知時，是否可以將摺疊按鈕居中？我可以這樣做：垂直對齊引導程序4導航欄摺疊按鈕

.navbar-toggler { 
    top: 0; 
    bottom: 0; 
    margin-top: auto; 
    margin-bottom: auto; 
    height: 40; /*something appropriate*/ 
}

現在按鈕是垂直對齊的。但是，當我打開菜單（點擊它）時，它也將集中在文本上，這是我不想要的。玩弄在這裏：

https://codepen.io/anon/pen/ZKbJJV

我也想使標誌浮動權當它在「移動視圖」。也許沒有使用媒體查詢可能嗎？

來源

2017-04-18 MortenMoulder

不會以這種方式..你必須將摺疊按鈕和品牌標誌包裹在一個div中才能獲得fx高度。當我們在移動情況下打開菜單時，nav的高度變得可變。 –

@SahilDhir即使我將它們包裝在一個div中，並執行'class =「d-flex align-items-center」'，它將不起作用，因爲按鈕位於絕對位置。 – MortenMoulder

你可以使用它創建一支筆嗎？ –

我把它通過包裝按鈕和品牌在這樣一個div工作：

<div class="d-flex align-items-center justify-content-between"> 
    <button class="navbar-toggler navbar-toggler-left" 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 ml-3" href="/en"> 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" class="logo" alt="logo"> 
    </a> 
</div>

然後我做了按鈕一些CSS以及：

.navbar-toggler { 
    align-self: inherit; 
    position: initial; 
}

而且這幾乎是它。解決了這兩個問題！

來源

2017-04-18 10:25:35 MortenMoulder

垂直對齊引導程序4導航欄摺疊按鈕

回答

相關問題