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>
  • 相关阅读:
    java8学习
    linux常用命令
    window操作系统分区
    java8特性
    mysql索引本质
    红黑树
    http请求传参问题解决
    老王说架构
    从URL到看到网页的过程
    RabbitMQ如何工作和RabbitMQ核心概念
  • 原文地址:https://www.cnblogs.com/remly/p/12005135.html
Copyright © 2011-2022 走看看