twitter-bootstrap - 使用 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