使用Bootstrap导航条垂直对齐列表项到底部

我有不同长度的菜单项。我使用了一个Bootstrap模板（https://getbootstrap.com/docs/3.3/examples/navbar/），最初有一个顶部导航栏，它将对其进行响应并进行自定义，以尝试获取我要求的设计 - 例如，我更改了图片的“项目名称”。问题是我很难对齐UL底部的菜单项，以匹配图像底部。使用Bootstrap导航条垂直对齐列表项到底部

我有这样的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 +-------------------+

提前致谢。

来源

2017-08-30 Jeremy Belolo

您是否尝试过使用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

来源

2017-08-30 20:29:26 DearBee

它的工作原理只有当你定义一个固定的高度。我不想这样做 - 高度是由使用的图像的高度来定义的。 –

我编辑了我的答案，看看这是否有帮助 – DearBee

使用Bootstrap导航条垂直对齐列表项到底部

回答

相关问题