首先上问题：此问题为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. 15.python文件(file)方法详解

    文件的基本操作 文件读写: 文件的读写满足以下3个步骤: 1).打开文件 2).操作数据(读.写) 3).关闭文件 --> 不要忘记 1).打开文件: python的open() 方法用于打开一 ...

  2. MySql学习-3.命令脚本

    一.数据库操作: 1. 登录数据库:mysql -uroot -p (这个password是自己设定的,我这里的没密码) 注意:(数据路径是:D:\MySql\install1\data 操作路径:D ...

  3. LINUX系统(CentOS7安装)一之JDK8的安装

    JDK 的安装系统安装就不做过多介绍,大家从网上寻找安装步骤进行安装,不过我推荐大家进行安装时选择桌面图形化格式进行安装,方便做一部分操作,同时在安装过程中选择英文模式,同时我自己在安装的过程中发现使 ...

  4. Programming on C 学习笔记

    目录 include不同的声明方式有什么不同? if defined 与 #ifdef 有什么区别? undef 是怎么工作的? 如何利用 typedef 来定义数组? 枚举中,如果有个元素被赋予值, ...

  5. intellji IDEA 2019版激活码（亲测可用 2019年10月14日08:53:54）

    MNQ043JMTU-eyJsaWNlbnNlSWQiOiJNTlEwNDNKTVRVIiwibGljZW5zZWVOYW1lIjoiR1VPIEJJTiIsImFzc2lnbmVlTmFtZSI6I ...

  6. cf1176D

    题意简述:数组a经过一系列操作之后获得数组b,给你数组b,构造出一个满足条件的数组a 操作如下从左到右扫描数组a,如果是一个素数,那么把第这个素数的素数加到数组a中,例如a[1]=2那么加3到数组a当 ...

  7. 【笔记】机器学习 - 李宏毅 - 5 - Classification

    Classification: Probabilistic Generative Model 分类:概率生成模型 如果说对于分类问题用回归的方法硬解,也就是说,将其连续化.比如 \(Class 1\) ...

  8. Visual Studio 2017中使用gulp编译sass/scss

    在Visual Studio 2017中使用gulp编译sass/scss文件 需要的环境:Visual Studio 2017.Node.js.npm 在vs2017中 [视图]-[其他窗口]-[任 ...

  9. Python 安装 virturalenv 虚拟环境

    返回目录 本篇索引 一.概述 二.Linux下安装Python虚拟环境 三.Windows下安装Python虚拟环境 一.概述 有时候会在一台主机上安装多个不同的Python版本,用以运行不同时期开发 ...

  10. Java求素数和

    描述 从键盘任意输入两个整数m,n,编程计算并输出m~n之间的所有素数之和. 输入 在一行上输出m和n. 输出 m和n之间(包括m和n)的素数的和 难度 一般 输入示例 2 5 输出示例 10 完成代 ...