首先上问题：此问题为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. Dijkstra算法(Matlab实现)

    a = [,,,,,,]; % 起点节点 b = [,,,,,,]; % 终点节点 c = [,,,,,,]; % 对应权值 g = digraph(a,b,c); % 创建图 [path,dista ...

  2. git rm与git rm --cached的区别

    git rm与git rm --cached的区别 当我们需要删除暂存区或分支上的文件, 同时工作区也不需要这个文件了, 可以使用. git rm file_path git commit -m 'd ...

  3. wondiws+centos 双系统

    任务:在windows下安装CentOS 1.下载CentOS镜像文件,准备一个未格式化的空间. 2.使用UltraISO将要安装的系统写入U盘. 3.用U盘启动,将系统装入一个空的分区下(未格式化) ...

  4. 【巨杉数据库SequoiaDB】巨杉Tech | 分布式数据库千亿级超大表优化实践

    01 引言 随着用户的增长.业务的发展,大型企业用户的业务系统的数据量越来越大,超大数据表的性能问题成为阻碍业务功能实现的一大障碍.其中,流水表作为最常见的一类超大表,是企业级用户经常碰到的性能瓶颈. ...

  5. defender 书荐

    2018全年度推荐: 1.[法]大仲马——基督山伯爵 2.[美]加西亚·马尔克斯——百年孤独 3.[法]大仲马——三个火枪手 2019第一季度推荐: 1.霍达——穆斯林的葬礼 2.[苏联]尼·奥斯特洛 ...

  6. 请求筛选模块被配置为拒绝包含双重转义序列的请求（.net core程序的‘web.config’调整）

    之前项目有一个静态文件特殊字符转义的报错(+变为 %2B),老是显示404  请求筛选模块被配置为拒绝包含双重转义序列的请求  .网上的大多数解决方案都是一下: https://www.cnblogs ...

  7. babel环境安装与编译

    babel:将浏览器不支持的ES6语法转为javascript 查看node是否安装: npm -v node -v 实例演示:在桌面新建part5目录在cmd命令行中 cd desktop cd p ...

  8. scrapy框架综合运用 爬取天气预报 + 定时任务

    爬取目标网站: http://www.weather.com.cn/ 具体区域天气地址: http://www.weather.com.cn/weather1d/101280601.shtm(深圳) ...

  9. Navigation Nightmare POJ - 1984 带权并查集

    #include<iostream> #include<cmath> #include<algorithm> using namespace std; ; // 东 ...

  10. 04、extern引用全局变量

    这里强调一点就是关extern的声明: extern在声明中最主要的作用就是告诉编译器别的文件引用了全局变量XXXX. 举例: 有一个工程名字叫 Project1. Project1下面有两个.cpp ...