[ bootstrap ] 图片内容占用padding的范围，如何解决？

问题描述：

从效果图看到，图片内容占据了padding的范围，怎么解决呢？

html代码

<div class="container">
    <div class="row">
        <!-- 头像+edit按钮 -->
        <div class="col-sm-3">
            <!-- 头像 -->
            <div class="row">
                <div class='avatar'>
                        <img src="../assets/avatar.png" alt="" class="rounded img-fluid w-100" >
                </div>
                <p>按钮</p>
            </div>
        </div>
    </div>
</div>

效果

解决方案：

去掉嵌套row，效果参考bootstrap文档 全局CSS样式 -> 栅格系统 -> 列偏移

<div class="container">
    <div class="row">
        <!-- 头像+edit按钮 -->
        <div class="col-sm-3">
            <!-- 头像 -->
            <div class="row">
                <div class='avatar'>
                        <img src="../assets/avatar.png" alt="" class="rounded img-fluid w-100" >
                </div>
                <p>按钮</p>
            </div>
        </div>
    </div>
</div>