bootstrap去除自带15px内边距,去除container 15px padding
壹 ❀ 问题
在使用bootstrap时,由于bootstrap槽宽特性,我们在布局时会发现container以及col-**-**左右都会自带15px的padding,有时候空间不足就想着怎么把bootstrap自带的槽宽设置为0,这里说说具体的做法。
贰 ❀ 通过定制
这里以bootstrap3为例,打开官网,点击定制进入定制页。

找到Grid system下的@grid-gutter-width变量,修改为0,点击页面最下方的编译并下载按钮,再次引入就能发现所有槽宽都没了。

叁 ❀ 通过reset
如果觉得上面的方法麻烦,我们可以额外定义一个bootstrap.reset的样式表来解决这个问题,复制下方代码用于覆盖bootstrap自带样式。
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12,
.container-fluid,
.container {
padding-right:;
padding-left:;
} .row {
margin-right:;
margin-left:;
}
希望能帮到你。
bootstrap去除自带15px内边距,去除container 15px padding的更多相关文章
- CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)
CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...
- CSS 内边距 (padding) 实例
CSS 内边距 (padding) 实例元素的内边距在边框和内容区之间.控制该区域最简单的属性是 padding 属性. CSS padding 属性定义元素边框与元素内容之间的空白区域.CSS 内边 ...
- 解决Bootstrap container样式左右内边距15px,导致屏幕不美观
首先上问题:此问题为bootstrap的 container样式导致,该样式默认左右内边距15px为了栅栏效果而设计,具体看源码css样式,如下图,右侧黄色边框边距和30px,实为两个div左浮动,将 ...
- Android GridView去除自带边框点击效果、去除右侧滚动条、禁止上下滑动
一.去除自带边框点击效果: <com.example.gridview.MyGridView android:id="@+id/grid_upload_pictures" a ...
- [YII2] 去除自带头部以及底部右下角debug调试功能
YII2 去除自带头部以及底部右下角debug调试功能
- h5中div边距去除
style样式里面加上 <style> *{ margin:0 ;//外边距为0 padding:0;//内边距为0 } </style>
- css内边距与外边距的区别
你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...
- 区分内边距与外边距padding和margin
以两个并排显示的div为例说明. 现在两个div都有背景颜色, 右边的div中有几行p, 若是想要使两个div之间有间隔, 即两块带了颜色区域之间产生空隙, 则给div的css中外边距margin赋值 ...
- CSS.03 -- 浏览器行高、字体;盒子模型--边框、内边距、外边距
如果此时你也在自学中,请使用 FireWorks CS6 进行切图测距等,百度一下吧~ Fireworks的基本使用 新建文件 ctrl+n 打开文件 ctrl+o 调出和隐藏标尺 ctrl+r ...
随机推荐
- 腾讯 Techo 开发者大会首发来袭!云原生中间件技术实践等你来!
腾讯 Techo 开发者大会是由腾讯云发起的面向全球开发者和技术爱好者的年度盛会,2019 年 11 月 6 日 - 7 日将在北京嘉里大酒店首次召开. 作为一个专注于前沿技术研讨的非商业大会,Tec ...
- LeetCode刷题191123
博主渣渣一枚,刷刷leetcode给自己瞅瞅,大神们由更好方法还望不吝赐教.题目及解法来自于力扣(LeetCode),传送门. 算法: 给出一个区间的集合,请合并所有重叠的区间. 示例 1: 输入: ...
- sqlplus命令窗口执行sql脚本文件
SQL>@file_name 例如 SQL>@monitor.sql 文件须得在当前窗口所在的目录下或者指定某个路径. SQL>@D:\monitor.sql 转载示例-- ...
- Centos7下oracle配置(详细)
一.硬件配置 CentOS7@VMware® Workstation 15 Pro,分配资源:CPU:2颗,内存:4GB,硬盘空间:30GB 二.软件准备 linux.x64_11gR2_datab ...
- mysql5.7中timestam默认值'0000-00-00 00:00:00'报错
在mysql5.7中设置 timestamp NOT NULL DEFAULT '0000-00-00 00:00:00'会报错: 解决办法: mysql> set sql_mode='NO_A ...
- 浅谈C++ STL string容器
浅谈C++ STL string容器 本篇随笔简单讲解一下\(C++STL\)中\(string\)容器的使用方法及技巧. string容器的概念 其实\(string\)并不是\(STL\)的一种容 ...
- SpringBoot入门(简单详细教程)
Spring Boot 简介 简化Spring应用开发的一个框架:整个Spring技术栈的一个大整合:J2EE开发的一站式解决方案: 微服务 martin fowler:微服务:架构风格(服务微化): ...
- 对python中等值和大小比较
等值.大小比较 在python中,只要两个对象的类型相同,且它们是内置类型(字典除外),那么这两个对象就能进行比较.关键词:内置类型.同类型.所以,两个对象如果类型不同,就没法比较,比如数值类型的数值 ...
- Java数据类型和自动拆装箱
1.java的数据类型:基本数据类型(8种)和引用数据类型. 基本数据类型: 类型 boolean byte short char int long float double 位 1 8 16 16 ...
- PostgreSQL 表字段起别名
使用Postgreq Sql 表字段起别名时注意要用双引号,使用单引号会出现语法错误,执行结果如图