问题描述:
从效果图看到,图片内容占据了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>