Twitter bootstrap 引导4-将元素与其容器底部对齐

我试图找到一个答案，但没有运气，我自己也尝试了一些事情。 一行中有两列，我想将第二列（三个按钮组）的底部div垂直对齐到行容器的底部，即#控制面板

目前，第二列居中对齐（垂直），这就是为什么这三个按钮没有连接到容器底部的原因

此外，我附加了一个图像，使它更容易看到

我尝试对我想要对齐底部的“btn组”类使用“自底对齐”或“自底对齐”，但它会水平移动，而不是垂直移动

非常感谢您的建议查看此StackBlitz:

HTML文件：

<div class="main-container">
  <div class="first-column">

  </div>

  <div class="second-column">
    <div class="buttons">

      <button>Button1</button>
      <button>Button2</button>
    </div>
  </div>
</div>

---

我在这里使用flexbox创建一个主容器（红色）和两列（蓝色和绿色），然后在第二列中创建两个按钮，并将它们与容器底部对齐。

\control panel

是容器吗？您发布的html代码中没有包含id为

control panel

的元素，我尝试了您的代码，按钮与底部对齐。你能更详细地解释一下你的问题吗？也许在StackBlitz中发布一个你的代码示例。嘿，伙计们，我很抱歉没有很好地解释我自己，我编辑了我的帖子，以便更容易理解这个问题。再次提前感谢哇，非常感谢你详细的回答，胡安！很有帮助

#control-panel {
height: 200px
}

<div class="main-container">
  <div class="first-column">

  </div>

  <div class="second-column">
    <div class="buttons">

      <button>Button1</button>
      <button>Button2</button>
    </div>
  </div>
</div>

.main-container {
  border-color: red;;
  border-style: solid;
  height: 100px;

  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.first-column {
  border-color: blue;;
  border-style: solid;
  height: 100px;
  width: 100px;
}

.second-column {
  border-color: green;;
  border-style: solid;
  height: 100px;
  width: 100px;
}

.buttons {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  height: 100px;
}