Bootstrap框架下左右容器高度不对齐问题该如何解决？

问题根源 #

• 你给左右两列都添加了Bootstrap的my-auto类，该类作用是让列在父级行容器内垂直居中，而非占满父容器的完整高度
• 两侧的.card元素未设置占满外层列容器高度的规则，默认只会根据内部内容自适应高度，用<br>标签手动撑高度的方式无法适配不同分辨率、不同内容长度的场景，必然会出现高低错位

修复方案 #

1. 删除左右两列的my-auto类属性，修改后的列代码如下：
   左侧列：<div class="col-md-2 p-1">
   右侧列：<div class="col-md-10">
2. 给两个.card元素添加h-100类（Bootstrap自带的100%高度工具类），或者直接在你现有的CSS的.card选择器里新增规则height: 100% !important;，让卡片自动占满外层列的全部高度
3. 删除所有用来手动撑高度的冗余<br>标签，无需手动控制高度，左右卡片会自动保持高度一致

可选优化 #

如果要让左侧侧边栏的导航菜单和顶部logo之间的空白区域自适应填充，可以给左侧的.card添加d-flex flex-column类，再给导航菜单的父容器加flex-grow: 1属性，不用写死占位标签。

内容的提问来源于stack exchange，提问作者Lethalbacon