首先上问题:此问题为bootstrap的 container样式导致,该样式默认左右内边距15px为了栅栏效果而设计,具体看源码css样式,如下图,右侧黄色边框边距和30px,实为两个div左浮动,将边距挤到右侧;

解决它很简单:只需复写 container样式 padding-left:0px 和padding-right:0px; 然后在该容器子元素 row复写样式 .row{margin:0};即可,如果row有子元素列,col-*-* {padding:0}即可,修改后,结果图:

还有种方案:定义面板样式,可以完美避开这个问题,例如:<div class="panel panel-default"></div>

解决Bootstrap container样式左右内边距15px,导致屏幕不美观的更多相关文章

  1. css内边距与外边距的区别

    你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...

  2. (转)css内边距与外边距的区别,精辟啊

    css内边距与外边距的区别 (2012-05-02 13:54:54) 转载▼ 标签: 杂谈 分类: css 本文也是网上看了后收藏的,忘了原地址(以后收藏文章得注意) 你真的了解margin吗?你知 ...

  3. CSS权威指南 - 内边距 边框 和 外边距

    九十年代的完全用表格布局,简单的段落边框都需要用表格.CSS让布局更方便. 基本元素框 basic element boxes 如同第七章基本视觉格式化那一章讲到,每个文档元素会生成一个元素框,这个框 ...

  4. CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)

    CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...

  5. [04-05]box框模型(Box Model)定义了元素框处理元素内容、内边距、边框和外边距的方式

    实际占有的宽 = width + 2padding(内边距) + 2border(边框) + 2margin(外边距) 实际占有的高 = height + 2padding + 2border + 2 ...

  6. css内边距 边框

    /*1 元素的各边都有 10 像素的内边距 四个值上.右.下.左 两个上下,左右 三个值:上,左右,下*/ /*p {padding: 10%;}*/ h1 { padding-top: 10px; ...

  7. ie6、7下button添加背景和边框,内边距会出现1px的边框

    ie6.7下button添加背景和边框,内边距会出现1px的空白边框 解决办法:在input外面加上一个标签,把背景和边框都写在标签的样式上面,input的 background和border都non ...

  8. CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式

    转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http:/ ...

  9. CSS.03 -- 浏览器行高、字体;盒子模型--边框、内边距、外边距

    如果此时你也在自学中,请使用 FireWorks CS6 进行切图测距等,百度一下吧~ Fireworks的基本使用 新建文件   ctrl+n 打开文件  ctrl+o 调出和隐藏标尺 ctrl+r ...

随机推荐

  1. pyinstaller打包报错: RecursionError: maximum recursion depth exceeded 已经解决

    看上去似乎是某个库自己递归遍历超过了python的栈高度限制 搜索了一番,很快找到了解决办法: https://stackoverflow.com/questions/38977929/pyinsta ...

  2. Node中使用MongoDB

    简介 MongoDB 中文文档 MongoDB是一个介于关系数据库和非关系数据库(nosql)之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的. Mongoose 在Node中可以使用 Mo ...

  3. MySQL基础(5) | 存储过程

    MySQL基础(5) | 存储过程 一.基础 结束符[重要] mysql的命令行执行每一条命令是以分号结尾的,也就是说识别是否为一条命令,是根据分号决定的. 然而存储过程中设计多条语句,很可能出现多个 ...

  4. Badusb 简易制作

    Badusb easy_make 0x00 basic knowledge and equip arduino IDE download address: https://www.arduino.cc ...

  5. 吴裕雄--天生自然 R语言数据可视化绘图(4)

    par(ask=TRUE) # Basic scatterplot library(ggplot2) ggplot(data=mtcars, aes(x=wt, y=mpg)) + geom_poin ...

  6. Excel_单元格格式_查找替换、定位

    不重复! 显示格式:Ctrl+1 1,合并后居中,填充颜色,设置单元格边框,划斜线,格式刷(单击,双击) 2,单元格数字格式,格式不会改变值!自定义(编码规则) 4个 a :只显示星期:周+aaa:周 ...

  7. Mysql字符串截取,去掉时间,匹配日期等于今日

    Mysql字符串截取,去掉时间,匹配日期等于今日 方案一 select time from jsb where date(time)=date(now()); 方案二 ));

  8. 如何将文本放置在div的底部显示呢?

    转自:将文本定位于div的底部的方法  摘要: 下文讲述将文本放于div的底部的两种方法,如下所示: 实现思路: 思路1:采用绝对定位的方式,将其放置于div的底部 思路2:使用Line-height ...

  9. 方法(定义、调用、重载)—Java

    一. 什么是方法 不可能所有的功能都放到main中,需要定义其他方法完成指定功能,需要时调用方法即可 封装在一起来执行操作语句的集合,用来完成某个功能操作 封装在一起来执行操作语句的集合,用来完成某个 ...

  10. Miller-Rabin素数检测算法 acm模板

    Miller-Rabin素数检测算法 其基于以下两个定理. Fermat小定理 若n是素数,则∀a(a̸≡0(modn))\forall a(a \not\equiv 0 \pmod{n})∀a(a̸ ...