Css 将div与底部对齐：我是否使用了；“对齐内容结尾”；不正确？

我对BootStrap还不熟悉（对web开发也很陌生），已经看过了很多视频教程和文档，但我仍然在与布局搏斗——我没有得到任何东西

下面我要做的是创建左面板和右面板，其中包含未显示的其他内容，并使黄色和绿色按钮栏与容器底部对齐，而不管面板中有其他内容

我已经戳了几个小时了。我是否从根本上没有正确地阐述这一点，还是我没有在正确的位置使用

align content end

类

（我不知道下面的代码段为什么会抛出错误——它似乎有效）

---

我所拥有的：

---

我想要的是：

#事件选项卡容器{
/*背景：灰色*/
高度：90vh；
}
#左面板{
背景：轻珊瑚；
边框：1px纯色灰色；
边界半径：10px；
/*右边距：10px*/
}
#右面板{
背景：淡天蓝；
边框：1px纯色灰色；
边界半径：10px；
}
#左边的按钮栏{
背景：黄色；
}
#右边的按钮栏{
背景：浅绿色；
}

左边
取消
保存事件
正确的
新事件

您应该制作cols

d-flex弹性柱

，然后

mt自动

自动上边距

<div id="events-tab-container" class="container">
    <div class="row h-100">

        <div id="left-panel" class="col col-8 d-flex flex-column">
            left

            <div id="button-bar-left" class="d-flex mt-auto justify-content-end align-content-end">
                <button id="cancel-event-btn" class="btn btn-sm btn-secondary mr-2">Cancel</button>
                <button id="save-event-btn" class="btn btn-sm btn-primary mr-2">Save Event</button>
            </div>
        </div>

        <div id="right-panel" class="col col-4 d-flex flex-column">

            right

            <div id="button-bar-right" class="d-flex flex-column mt-auto justify-content-end align-items-end">
                <button id="new-event-btn" class="btn btn-sm btn-primary mr-2">New Event</button>
            </div>
        </div>
    </div>
</div>

左边
取消
保存事件
正确的
新事件

---

您可以使条形图的父级

显示：flex

，以使用其所有有趣的属性

flex的示例：

.left-panel {
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
}

---

然后，您需要在吧台上添加边距，使其位于您想要的位置。

谢谢！这让我又搬家了。看来我需要进一步研究Flexbox。