使用Bootstrap導航條垂直對齊列表項到底部

Question

我有不同長度的菜單項。我使用了一個Bootstrap模板（https://getbootstrap.com/docs/3.3/examples/navbar/），最初有一個頂部導航欄，它將對其進行響應並進行自定義，以嘗試獲取我要求的設計 - 例如，我更改了圖片的「項目名稱」。問題是我很難對齊UL底部的菜單項，以匹配圖像底部。

我有這樣的HTML（簡體）：

<div class="container"> 
    <nav class="navbar"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="/"> 
        <img src="/img/logo.png"> 
       </a> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 
       <ul id="mainNavBar" class="nav navbar-nav"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Contact</a></li> 
        <li><a href="#">a fairly long item menu</a></li> 
       </ul> 
      </div><!--/.nav-collapse --> 
     </div><!--/.container-fluid --> 
    </nav> 
</div><!--/.container --> 

這個CSS：

.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { 
    float: none; /* This is for the .container-fluid height to match the image height, and therefore allow for a possible bottom alignment of its ul sibling */ 
} 

#mainNavBar { 
    float: none; 
    vertical-align: bottom; 
} 
#mainNavBar > li { 
    float: none; 
    display: inline-block; 
    vertical-align: bottom; 
} 

實際：

B +--------------------+ 
I |Row1 Row1 Row1 Row1 | 
G |  Row2  Row2 | 
    |  Row3   | 
I |     | 
M |     | 
A |     | 
G |     | 
E +--------------------+ 

我需要：

B +-------------------+ 
I |     | 
G |     | 
    |     | 
I |     | 
M |  Row1   | 
A |  Row2  Row1| 
G |Row1 Row3 Row1 Row2| 
E +-------------------+ 

提前致謝。

Answer 1

您是否嘗試過使用flex？

如果我認爲這是正確的，你有一個容器內的菜單，裏面也有一個圖像？

例如，這是你的菜單與它的容器：

<div class="menu-container"> 
<img src="https://via.placeholder.com/300x150.jpg"> 
<ul> 
    <li></li> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
</ul> 
</div> 

添加這個CSS，這將相應地調整它：

.menu-container { 
    background: red; 
    display: flex; 
    align-items: flex-end; 
} 

ul { 
    list-style: none; 
    padding: 0px; 
    margin: 0px; 
} 

ul li { 
    float: left; 
} 

編輯：更新JSfiddle