Twitter bootstrap 使用引导导航栏将列表项垂直对齐到底部

我有不同长度的菜单项。我使用了一个引导模板（）最初有一个顶部导航栏，它将是响应性的，并对它进行了一些定制，以便尝试获得要求我做的设计-例如，我更改了图像的“项目名称”。问题是我很难调整UL底部的菜单项，以匹配图像底部

我有这个HTML（简化）：

实际：

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   +-------------------+

谢谢你。你试过使用吗

如果我假设这是对的，你在一个容器里有一个菜单，里面也有一个图像

例如，这是您的菜单及其容器：

<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>

---

编辑：已更新

仅当您定义固定高度时，该选项才有效。我不想这样做-高度是由使用过的图像的高度定义的。

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

<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>

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

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

ul li {
  float: left;
}