问题描述:

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

[ bootstrap ] 图片内容占用padding的范围,如何解决?的更多相关文章

  1. memcache占用CPU过高的解决办法

    Simon最近为公司服务器操碎了心 , 先是mysqld进程占用CPU过高 , 导致服务器性能变低 ,网站打开太慢.通过增加max_connections及table_cache解决了问题 ,随后发现 ...

  2. 再记一次w3wp占用CPU过高的解决过程(Dictionary和线程安全)

    在此之前项目有发生过两次类似的状况,都得以解决,但最近又会发现偶尔CPU会跑满,虽然之前使用过WinDbg解决过两次问题但人的记忆是不可靠的,今天处理同样问题的时候还是遇到了一些障碍,这一次希望可以记 ...

  3. Oracle占用8080端口问题的解决

    可能在本地同时安装过Tomcat和Oracle的人都会知道,安装完Oracle后,会发现Tomcat的8080端口已经被Oracle占用了. 完全安装Oracle数据库后,当我们访问8080端口时,会 ...

  4. Unity3D占用内存太大的解决方法

    原地址:http://www.cnblogs.com/88999660/archive/2013/03/15/2961663.html 最近网友通过网站搜索Unity3D在手机及其他平台下占用内存太大 ...

  5. 关于inodes占用100%的问题及解决方法

    #df shows no file systems processedPosted by John Quaglieri on 27 July 2012 07:26 AMA df -m command ...

  6. (转)Unity3D占用内存太大的解决方法

    自:http://www.cnblogs.com/88999660/archive/2013/03/15/2961663.html 最近网友通过网站搜索Unity3D在手机及其他平台下占用内存太大.  ...

  7. 【SQL Server】SQL Server占用CPU使用率100%的解决方法

    原文:[SQL Server]SQL Server占用CPU使用率100%的解决方法 近日,帮一个客户解决了服务器CPU占用率高达100%的问题. 以前做的一个某污水处理厂自控系统项目,客户反映其自控 ...

  8. Linux x64 下 Matlab R2013a 300 kb 脚本文件调试的 CPU 占用过高问题的解决办法

    (1) 系统+软件版本 CentOS 6.5 (Final), 64 位,内核initramfs-2.6.32-431.5.1.el6.x86_64, MATLAB Version: 8.1.0.60 ...

  9. Apache服务器httpd.exe进程占用cpu超过50%的解决方法

    httpd.exe进程占用cpu超过50%,关闭掉Apache服务,cpu应用率立刻下降到0.  重新启动Apache又出现占用cpu高的情况.  原因是:httpd.exe和防火墙配置有冲突. 解决 ...

随机推荐

  1. spring mvc访问html页面404报错解决

    <servlet> <servlet-name>context</servlet-name> <servlet-class>org.springfram ...

  2. java多线程4:volatile关键字

    上文说到了 synchronized,那么就不得不说下 volatile关键字了,它们两者经常协同处理多线程的安全问题. volatile保证可见性 那么volatile的作用是什么呢? 在jvm运行 ...

  3. CPU的中断

    目录 一.简介 二.具体 方式 硬中断 软中断 中断切换 网卡中断 三.中断查看 一.简介 中断其实就是由硬件或软件所发送的一种称为IRQ(中断请求)的信号.中断允许让设备,如键盘,串口卡,并口等设备 ...

  4. CPU测试工具

    目录 一.简介 二.大量计算 三.大量IO 四.大量进程 一.简介 使用stress-ng是一个 Linux 系统压力测试工具,模拟进程平均负载升高的场景. 使用sysstat来检查监控和分析. mp ...

  5. STL 较详尽总结

    STL就是Standard Template Library,标准模板库.这可能是一个历史上最令人兴奋的工具的最无聊的术语.从根本上说,STL是一些"容器"的集合,这些" ...

  6. CSS中上下margin的传递和折叠

    CSS中上下margin的传递和折叠 1.上下margin传递 1.1.margin-top传递 为什么会产生上边距传递? 块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top ...

  7. office2007(word2007)另存为pdf文档

    默认office2007(word2007)是没有另存为pdf文档的功能的,需要安装插件 插件地址:https://yvioo.lanzous.com/iO5myedoceh 下载之后直接安装,安装成 ...

  8. cmake配置项目引用动态库

    note 本文将介绍使用FIND_PACKAGE配置项目动态库的方法 cmake version: 3.18 platform: win10 20H2 概述 创建了一个动态库,再由主项目调用该动态库. ...

  9. 【LeetCode】256. Paint House 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 动态规划 日期 题目地址:https://leetco ...

  10. 【LeetCode】222. Count Complete Tree Nodes 解题报告(Python)

    [LeetCode]222. Count Complete Tree Nodes 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: fuxuemingzhu 个 ...