首先上问题：此问题为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. Spark应用开发调优要点总结

    调试Spark应用性能的时候,首先应该理解spark是如何工作以及你的spark应用需要何种类型的资源.比如说,机器学习相关的spark应用更依赖cpu计算能力,ETL应用更依赖I/O能力,以此进行有 ...

  2. Windows显示默认桌面图标(计算机，用户的文件，网络，控制面板，回收站)

    1.按Win+R 2.复制以下命令 rundll32.exe shell32.dll,Control_RunDLL desk.cpl,,0 3.点击运行,根据需求勾选相应图标即可

  3. Android9.0 Camera2 横屏问题修改记录

    vendor\mediatek\proprietary\packages\apps 目录下有三份相机源码 分别是 Camera. Camera1. Camera2 通过查看 mk 发现通过 ifeq ...

  4. python笔记09

    今日内容 三元运算 函数 内容详细 三元运算(三目运算) v = 前面 if 条件 else 后面 if 条件: v = '前面' else: v = '后面' # 让用户输入值,如果值是整数,则转换 ...

  5. vs2015配置cv文件，不用每次新建项目在配置

    首先 选择空项目:新建完成后点击属性管理器 一定要确定你的环境是x86还是x64:我的是x64: 选择新的项目属性表 点击属性配置:配置cv的库目录.包含目录.链接器输入:可参考我前面的博文 Open ...

  6. FirstJavaWeb

    (未完成)出错有点多,Tomcat的配置也出问题了,Tomcat突然找不到jdk了,好像是我之前下载过一回然后没卸干净有残留文件,还有连接数据库的代码也有问题.       <%@page im ...

  7. 如何在Mac OS X上将PDF转换为Microsoft Word

    Lighten PDF to Word Converter for Mac是一个简单但功能强大的应用程序,可将PDF文件准确,轻松地转换为Microsoft Word.它可以保留原始内容的布局,格式, ...

  8. Educational Codeforces Round 79 (Rated for Div. 2) Finished （A-D）

    如果最大值比剩余两个加起来的总和+1还大,就是NO,否则是YES #include<bits/stdc++.h> using namespace std; int main(){ int ...

  9. C# ASCII码的转换、转义字符、对照表

    var splitStr = new byte[] { 0x05, 0x0D, 0x0A };//var splitStr = new byte[] { 5, 13, 10 };这样写也可以 var ...

  10. ASP.NET常用内置对象（三）Server

    Server对象是HttpServerUtility的一个实例,也是上下文对象HttpContext的一个属性,提供用于处理Web请求的Helper方法. Server.MapPath("& ...