zoukankan      html  css  js  c++  java
  • [ 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>
  • 相关阅读:
    tp5后台开发某些心得
    some note
    py数据抓取小案例(博客
    vue axios的使用
    C# WebApi POST 提交
    WebApi 返回Json
    C# WebApi 处理Area路径问题
    时间比较
    将多行数据合并为一列
    汉字转换拼音
  • 原文地址:https://www.cnblogs.com/remly/p/12005135.html
Copyright © 2011-2022 走看看