將徽標與按鈕垂直對齊Bootstrap 4 navbar

如何在Bootstrap 4中創建以便移動視圖上的按鈕垂直對齊？徽標應在左側，按鈕在右側。使用最小標記。我甚至需要在按鈕上設置order: 2才能將它對齊到右側？ align-items: content也因爲某種原因而無法正常工作。將徽標與按鈕垂直對齊Bootstrap 4 navbar

http://codepen.io/anon/pen/egypoe

<nav class="navbar navbar-inverse navbar-toggleable-md navbar-affix py-4"> 

    <div class="container"> 
    <div class="d-flex justify-content-between hidden-lg-up"> 

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

     <a class="navbar-brand" href="#"> 
     <img class="logo img-fluid" src="http://placehold.it/350x150"> 
     </a> 
    </div> 

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

     <ul class="navbar-nav ml-auto mt-2 mt-md-0"> 
     <li class="menu-item">Link 1</li> 
     <li class="menu-item">Link 2</li> 
     <li class="menu-item">Link 3</li> 
     </ul> 
    </div> 

    </div> 
</nav> 

body { 
    background-color: #333; 
} 

.logo { 
    max-width: 183px; 
} 

@media screen and (max-width: 480px) { 
    .navbar-toggler { 
    order: 2; 
    border: 0; 
    } 
    .d-flex { 
    align-items: center; 
    } 
} 

ul li { 
    color: #fff; 
}

來源

2017-01-29 Ivan Topić

請輸入您的完整代碼，因爲在代碼中不會將輸出發送到控制檯， – Rab

由於某種原因，圖像不顯示，但在調整到較小屏幕（我要求）時顯示。在桌面上佈局看起來很好 –

原因align items: content不是爲垂直居中的工作是因爲按鈕有align-self屬性，該屬性覆蓋它。您可以通過將align-self: auto或甚至align-self: center添加到按鈕來解決此問題。您需要order: 2才能更改DOM中的順序。我的意思是，還有其他方法可以通過定位和浮動來實現，但這對於flex佈局來說是最簡單的。

來源

2017-01-30 00:11:00 shakeypress

將徽標與按鈕垂直對齊Bootstrap 4 navbar

回答

相關問題