Bootstrap 5圆角列容器内容溢出问题解决求助

问题根源 #

• rounded-pill会生成全圆角边框，但如果容器没有足够内边距，内容会贴合容器物理边界（而非圆角视觉边界），导致溢出到圆角区域外。
• 内层嵌套的col-md-12是栅格类，自带的padding和布局逻辑会干扰外层圆角容器的适配，属于冗余嵌套。

解决步骤 #

1. 移除冗余栅格嵌套
   删掉内层的col-md-12，直接在外层容器上控制内边距，避免栅格样式冲突。

2. 给圆角容器添加合适内边距
   利用Bootstrap内边距工具类（如p-3、p-4）给col-6 rounded-pill border元素设置内边距，确保内容和圆角边框间有足够间距。

3. 删除无效CSS属性
   shape-outside用于实现文字环绕浮动元素，和当前场景无关，直接删除该样式。

修改后的代码示例 #

HTML代码

<div class="row">
    <div class="col-6 rounded-pill border encabezado-clinica p-4">
        <h2>{{clinic.name}}</h2>
        <h5><img src="{% static 'img/icons/hospital.svg' %}">{{clinic.get_speciality_display}}</h5>
        <h5><img src="{% static 'img/icons/geo-alt.svg' %}">{{clinic.full_address}}</h5>
        <h5><img src="{% static 'img/icons/train-front.svg' %}">{{clinic.train_access}}</h5>
        <h5><img src="{% static 'img/icons/bus-front.svg' %}">{{clinic.bus_access}}</h5>
        <h5><img src="{% static 'img/icons/p-square.svg' %}">{{clinic.parking}}</h5>
        <h5><img src="{% static 'img/icons/telephone.svg' %}">{{clinic.phone_number}}</h5>
    </div>
</div>

CSS代码

.encabezado-clinica {
    /* 可按需添加背景色、文字样式等，无需shape-outside */
}

额外提示 #

• 若仍有内容溢出，可给容器添加overflow-hidden类，强制隐藏超出部分。
• 内边距可灵活调整：用px-*单独控制左右间距，py-*单独控制上下间距，数值1-5对应不同大小的内边距。

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