如何将BS-CS与星级评分固定在Bootstrap容器底部

你可以直接使用Bootstrap自带的flex工具类实现需求，无需额外编写自定义CSS，修改步骤如下：

• 给外层teacher_card容器添加h-100类，保证所有卡片高度统一，不会因内容长度不同出现高低不齐的情况
• 给右侧信息容器teacher_info添加d-flex flex-column h-100类，将其设置为纵向弹性布局，且占满父容器全部可用高度
• 给上方的姓名介绍容器teacher_name添加flex-grow-1类，让该区域自动撑满剩余的纵向空间，自然把下方的学历、城市、星级评分区域挤到容器底部

修改后的完整代码如下：

<div className="item1 col-12 col-md-6 col-lg-4 col-xl-4 my-4">
    {/* col-12 -> 移动端单排显示1张卡片 // col-md-6 -> 中等设备单排显示2张卡片 // col-lg-6 -> 大屏设备单排显示2张卡片 // col-xl-4 -> 超宽屏单排显示3张卡片 */}
    <div className="row teacher_card h-100">
        {/* 教师头像区域 */}
        <div className="col-12 col-md-12 col-lg-4 teacher_img">
            <img src={props.teacher_img} className="img-fluid img_size" alt="教师头像" />
        </div>
        {/* 教师信息区域 */}
        <div className="col-12 col-md-12 col-lg-8 teacher_info d-flex flex-column h-100">
            <div className="teacher_name flex-grow-1">
                <h1> {props.teacher_name} </h1>
                <p> {props.teacher_info} </p>
            </div>
            <div className="teacher_edu_city ">
                <div className="teacher_edu_city-in d-flex justify-content-between">
                    <h5> {props.teacher_edu} </h5>
                    <h5> {props.teacher_city} </h5>
                </div>
                <p> 🌟🌟🌟🌟🌟 </p>
            </div>
        </div>
    </div>
</div>

如果需要给底部区域添加上边距，还可以给teacher_edu_city额外添加mt-3类调整间距即可。

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