壹 ❀ 问题

在使用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的更多相关文章

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

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

  2. CSS 内边距 (padding) 实例

    CSS 内边距 (padding) 实例元素的内边距在边框和内容区之间.控制该区域最简单的属性是 padding 属性. CSS padding 属性定义元素边框与元素内容之间的空白区域.CSS 内边 ...

  3. 解决Bootstrap container样式左右内边距15px,导致屏幕不美观

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

  4. Android GridView去除自带边框点击效果、去除右侧滚动条、禁止上下滑动

    一.去除自带边框点击效果: <com.example.gridview.MyGridView android:id="@+id/grid_upload_pictures" a ...

  5. [YII2] 去除自带头部以及底部右下角debug调试功能

    YII2 去除自带头部以及底部右下角debug调试功能

  6. h5中div边距去除

    style样式里面加上 <style> *{ margin:0 ;//外边距为0 padding:0;//内边距为0 } </style>

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

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

  8. 区分内边距与外边距padding和margin

    以两个并排显示的div为例说明. 现在两个div都有背景颜色, 右边的div中有几行p, 若是想要使两个div之间有间隔, 即两块带了颜色区域之间产生空隙, 则给div的css中外边距margin赋值 ...

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

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

随机推荐

  1. Scrum Framework, Process and Story Point

    Scrum Framework Roles Ceremonies Artifacts Scrum Master Sprint Planning Product Backlog Product Owne ...

  2. RMAN RECOVER TABLE 功能是 Oracle Database 12c 的新增功能 (Doc ID 1521524.1)

    RMAN RECOVER TABLE Feature New to Oracle Database 12c (Doc ID 1521524.1) APPLIES TO: Oracle Database ...

  3. Vi/Vim常用命令(附快捷切换方法)

    vi/vim有两种模式,正常(命令行)模式 和编辑模式,在命令行模式下,任何键盘输入都是命令,在编辑模式下,键盘输入的才是字符. 启动/关闭Vi/Vim 启动:vi 打开 Vi/Vim编辑器vi 文件 ...

  4. @ImportResource

    1. @ImportResource(locations = {"classpath:beantest.xml"})标注到启动类上,从类路径下加载xml文件,通过Applicati ...

  5. 多项式总结(STAGE 1)

    这么难的专题居然只给了这么短时间... 然而在NC的教导之下还是有一定的收获的. 必须打广告:0,1,2,3 附带一个垃圾博客:-1 按照习惯,堆砌结论而不加证明. Section1 导数: 基本形式 ...

  6. 经验之谈-switch结构常见错误的分析与处理

    1.缺少break语句 本来只想输出“出任武林盟主”可输出结果为 错误分析:在 switch结构中,每一个case语句块后面如果不写 break语句, switch就会 直接往下面的case语句块运行 ...

  7. 连接远程服务器的几种方式/Vscode + Remote

    连接远程服务器的几种方式 前言 最近在尝试做网盘,使用的技术栈大概是 .net core + MVC + Mysql + Layui,主要目的是通过这个具体的项目,熟悉熟悉 .net core 开发, ...

  8. Java 面试宝典!并发编程 71 道题及答案全送上!

    金九银十跳槽季已经开始,作为 Java 开发者你开始刷面试题了吗?别急,我整理了71道并发相关的面试题,看这一文就够了! 1.在java中守护线程和本地线程区别? java中的线程分为两种:守护线程( ...

  9. 一起学SpringMVC之注解

    概述 SpringMVC不仅提供了Xml的配置方式,还提供了注解的方式来声明一个Controller,本文属于SpringMVC的入门级内容,仅供学习分享使用,如有不足之处,还请指正. SpringM ...

  10. (转)Polynomial interpolation 多项式插值

    原文链接:https://blog.csdn.net/a19990412/article/details/87262531   扩展学习:https://www.sciencedirect.com/t ...