1 前言

今天开始学习Bootstrap啦~

2 布局——container

2.1 container的左右两侧会有空白——px-0

container的两侧可能会出现空白，（如果设置了背景色，就会出现背景色，这里实际上两边都是背景色），就像这样，

这是由于container内部的padding设置造成了，如果想去除这个“留白”，需要将padding设置为0，

即：px-0

效果如下：

2.2 row的右侧可能会有空白——no-gutters

在Bootstrap中，row表示布局中的一行，它的右侧也可能会有“留白”，如图所示，

这是需要给row控件加入设置no-gutters，

<div className="row no-gutters">

就可以去掉这个“留白”的部分，则设置后的效果为，

Bootstrap的学习笔记相关推荐

bootstrap框架学习笔记
bootstrap框架学习笔记 1.Bootstrap简介 2.基本使用 3.容器 4.设备划分 5.栅格系统 6.展示与隐藏 7.其他类前缀 8.组件直接参考开发文档 1.Bootstrap简介 B ...
快速构建网站或移动端页面：关于Bootstrap的学习笔记
最近在设计官网,并进行一些项目的原型设计和开发,寻找了很久,想找到一个更简单.快速的方式,基于一些已有的模板或框架进行快速建设,结果发现很多时间都是徒劳,走过的路分享给大家,以防再度踩坑: 网上搜索原 ...
Vue Bootstrap 结合学习笔记（一）
本文是不才在学习Vue和Bootstrap过程中遇到问题解决的一些思路,主要描述了项目搭建,组件封装.获取.编辑.更新的一步步实现,一些解决方案也没找到正确的官方API,还请大拿们多多提点. 项目介绍 ...
Bootstrap组件学习笔记（一）——大纲、Glyphicons字体图标和下拉菜单
目录: 1.组件学习大纲 2.Glyphicons字体图标 3.下拉菜单 1.组件学习大纲 2. Glyphicons字体图标 bootstrap含有接近250多个字体图标( 图标表格地 ...
Bootstrap学习笔记系列1-------Bootstrap网格系统
目录 Bootstrap网格系统学习笔记简单网格偏移列嵌套列列排序 Bootstrap网格系统学习笔记简单网格先上代码再解释 <!DOCTYPE html> <htm ...
miniui文件上传 linux,MINIUI grid学习笔记
grid 控件 a.事件的绑定和移除 grid.on("rowclick", fn); //绑定事件 (这个的话类似jquery的绑定事件) grid.un("rowcl ...
Bootstrap学习笔记-布局
Bootstrap学习笔记-布局默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html> <head> <meta charset="utf ...
Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
Bootstrap学习笔记01【快速入门、栅格布局】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...

Bootstrap的学习笔记

1 前言

2 布局——container

2.1 container的左右两侧会有空白——px-0

2.2 row的右侧可能会有空白——no-gutters

Bootstrap的学习笔记相关推荐

最新文章

热门文章