Bootstrap Modal响应式适配失效 小屏幕下个人头像尺寸异常变大

问题根因 #

• 栅格仅配置了lg断点（≥992px）的列宽规则，小于该断点的设备上两个列默认占满100%行宽，头像容器随列宽铺满整行，配合img的width:100%属性导致头像异常放大
• rounded-circle圆角类错误添加在列容器上，未作用于头像图片，无法实现圆形头像效果
• 头像未添加响应式图片类约束，缺少小屏尺寸下的最大宽度限制

修复步骤 #

1. 补充栅格列的小屏断点规则，小屏下头像列不占满整行，同时设置居中对齐
2. 将圆角类转移到头像img元素上，同时添加img-fluid类实现图片响应式适配
3. 给头像添加上限尺寸约束，避免小屏下尺寸过大

修改后完整代码 #

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="container px-5 py-3">
                    <h1>Deskripsi</h1>
                    <p>Lorem ipsum </p>
                    <h3 class="pt-4">Kontak</h3>
                    <div class="row pt-3">
                        <!-- 补充小屏断点规则，小屏下占6列且居中，移除列上的rounded-circle -->
                        <div class="col-lg-4 col-6 mx-auto d-flex justify-content-center mb-3 mb-lg-0">
                            <!-- 给img添加img-fluid、rounded-circle，新增max-width限制 -->
                            <img src="img/bilget.jpg" class="img-fluid rounded-circle" style="max-width: 200px; width: 100%;" alt="">
                        </div>
                        <!-- 补充小屏占12列规则 -->
                        <div class="col-lg-8 col-12 text-center text-lg-start">
                            <h5 class="ketua"></h5>
                            <h3 class="kontak"></h3>
                            <a class="btn btn-outline-success">Kontak</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

可选调整项 #

• 可根据实际设计需求调整col-6的占比，需要更小的头像可以改为col-4
• max-width: 200px可自由调整，用于限制头像的最大展示尺寸
• 新增的mb-3 mb-lg-0用于小屏下给头像和下方信息留出间距，大屏下自动取消间距
• text-center text-lg-start实现小屏下文字居中、大屏下左对齐的适配效果，不需要可直接删除

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