Html 如何使用CSS将div推到底部？

我的HTML定义如下：

<div id="container" className='row'>
    <div className='col-sm-9 col-md-6 col-lg-8'>
    </div>
    <div className='col-sm-3 col-md-6 col-lg-4'>
       <button id="bot" />
    </div>
</div>

但是，这大大改变了设计，因为它会将bot推到左侧和其兄弟div的顶部。正如您所看到的，我正在使用Bootstrap将其划分为网格。在我的案例中，如何使用CSS将此按钮按到底部

在div处使用d-flex并对齐按钮的自端

例如：

---

如果您正在使用React，只需将class更改为className作为示例代码。

使用display:flex；可以使第二列的内容与列的末尾对齐

.全高{ 最小高度：100vh； } 这个专栏有很多内容。这个专栏有很多内容。这个专栏有很多内容。这个专栏有很多内容。这个专栏有很多内容。这个专栏有很多内容。这个专栏有很多内容。这个专栏有很多内容。这个专栏有很多内容。这个专栏有很多内容。这 该列包含内容。这个专栏有很多内容。这个专栏有很多内容。 按钮

---

您正在查找引导的“对齐项”结束属性。以下是一个可运行的示例：

容器{ 位置：相对位置； 高度：100px； 宽度：300px； 背景：灰色； } 机器人{ 背景：黑色； 宽度：50px； 高度：50px； } 首先{ 身高：100%； 背景：蓝色； } 试试机器人的容器css 作为

"{ 身高：100%；

---

}`

可能的@LazarLjubenović副本已经看到了这一点，但大多数人认为我已经尝试过了，但没有效果。请注意，我这里也有引导。所以，这并不是那么简单。引导是用CSS编写的。没有任何东西可以阻止您使用自定义CSS将其向下推。因为你没有发布完整的复制品，所以这个问题很一般，所以它看起来肯定像是复制品，特别是上面有24个答案。什么都不起作用吗？容器{min height:calc100vh-100px；}bot{height:100px；}所以你想把按钮放在容器的底部中心？

#container
{
   position: relative;
}

#bot
{
   position: absolute;
   bottom: 0;
}

 <div class='col-sm-3 col-md-6 col-lg-4 bg-success d-flex'>
Lorem ipsum
<br />
   <button id="bot" class=" align-self-end">
   Button at Bottom!
   </button>
</div>