如何让BootStrap栅格之间留出空白间隙呢?
BootStrap栅格之间留出空隙
BootStrap栅格系统可以把我们的container容器划分为若干等分,如果想要每个部分之间留出一定的空隙,我们很可能首先想到的方法就是用margin
外边距来使它们分离从而产生空隙,这样做真的的可以吗?
【看个例子】:
css样式:
.row div {
height: 100px;
}
html代码:
<div class="container">
<!-- 行元素 -->
<div class="row">
<!-- 列元素 col-xs-数值 col-sm-数值 col-md-数值 col-lg-数值 -->
<div class="col-lg-5"style="background-color: wheat;"></div>
<div class="col-lg-4"style="background-color: pink;"></div>
<div class="col-lg-3"style="background-color: black;"></div>
</div>
</div>
【原效果如下】:
现在我们想让这三个部分之间相隔一段距离(10px)达到产生空隙的效果,但不能改变原来的布局,这里我们给它增加一个margin值:
css样式改为:
.row div {
height: 100px;
margin-right:10px;
}
【添加margin值后的效果】:
观察发现,有一个部分被挤了下来,也就是说这一波操作改变了原来的栅格布局。
【原因如下】:
我们在划分栅格时,划分的每一部分都是占满的,挤在一起的,要使每一列之间产一个空白空隙,因此你给它们加一个margin
值(而本身每一部分栅格的大小不变),那么每一部分就会移动,因此必定会超出父级container容器的宽度(12份)。
通过上述的操作及解释,我们知道是不能通过设置margin
值来使得栅格系统达到空出空隙的效果,那我们该如何解决呢?
【解决方法】:
我们可以给每个小列设置一个padding-right
值,小列里面再放一个盒子,通过设置它的宽度width:100%(同父级嘛)即可!
css样式:
.row div {
padding-left: 0px; // 去掉默认的左padding
padding-right: 10px;
height: 100px;
}
.hezi {
width: 100%;
background-color: green;
}
html代码:
<div class="container">
<!-- 行元素 -->
<div class="row">
<!-- 第一部分 -->
<div class="col-md-5"style="background-color: ;">
<div class="hezi"></div>
</div>
<!-- 第二部分 -->
<div class="col-md-4"style="background-color: ;">
<div class="hezi"></div>
</div>
<!-- 第三部分 -->
<div class="col-md-3"style="background-color: ;">
<div class="hezi"></div>
</div>
</div>
</div>
注:BootStrap的栅格系统对于响应式的网页开发非常方便,在使用栅格系统的时候可以非常方便的时候row和col--来控制布局。但是col--
默认会带15像素的左右padding
,这个会比较困扰。解决方案可以在内部标签的class上添加row
,将左右padding设为0即可,这样会去掉表格的默认padding。
最终效果和解析如下:
总结
以上是我在学习Bootstrap时遇到的问题,个人认为还是蛮有趣以及重要的,于是结合视频案例然后自己在另外做了详细分析总结,加深理解。你我本不认识,茫茫人海中相遇便是一种缘分。最后,感谢看到这里的你!愿你韶华不负,青春无悔!
注: 由于自己最近刚刚步入JavaWeb前端阶段学习,语言文字描述、技术等各方面都还不是很好,如果文章有任何错误和建议,请各位大佬尽情评论留言!如果这篇文章对你有些许帮助,希望可爱亲切的您点个赞推荐一手,非常感谢啦
如何让BootStrap栅格之间留出空白间隙呢?的更多相关文章
- font-size:0; 消除空白间隙
使用font-size:0解决设置inline-block引起的空白间隙问题 一.空白间隙问题 在进行页面布局的时候为了页面代码所谓整洁刻度,往往会设置缩进或是换行,但是元素display为inlin ...
- 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!
摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...
- Bootstrap 栅格系统初识
以下理论内容copy自bootstrap中文网(一个不错的bootstrap学习网站). 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport) ...
- 第二百三十五节,Bootstrap栅格系统
Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一.移动 ...
- Bootstrap栅格系统详解,响应式布局
Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...
- Bootstrap 栅格系统(转载)
源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...
- [bootstrap] 栅格系统和布局
1.简介 栅格系统(grid systems),也称为“网格系统”,运用固定的格子设计版面布局,风格工整简洁.是从平面栅格系统演变而来. Bootstrap建立在12列栅格系统.布局.组件之上.以规则 ...
- Bootstrap栅格系统(布局)
栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...
- 入门——Bootstrap栅格系统
作为刚接触到Bootstrap框架的新手一枚,刚开始对Bootstrap中的栅格系统一脸懵逼,后来经过反复的上网查找资料以及自己一直在练习,总算对栅格系统了解个差不多,所以我将我所了解的当成是日记写下 ...
随机推荐
- ZYNQ Linux 移植:包含petalinux移植和手动移植debian9
参考: https://electronut.in/workflow-for-using-linux-on-xilinx-zynq/ https://blog.csdn.net/m0_37545528 ...
- centos7下安装mycat中间件 笔记
1. 下载 # wget http://dl.mycat.org.cn/1.6.7.4/Mycat-server-1.6.7.4-release/Mycat-server-1.6.7.4-releas ...
- DRF使用JWT进行用户认证
1. 首先需要安装第三方依赖包 pip install djangorestframework-jwt 2. 在Django的settings文件中 配置全局的JWT认证类 REST_FRAMEWOR ...
- lwIP(Light Weight IP)协议
信号量 信号量结构体:struct sys_semt struct _sys_sem { void *sem; }; err_t sys_sem_new(sys_sem_t *sem, u8_t c ...
- 带标签的for循环
for循环可以加标签,使用break或者continue时,若存在多层嵌套循环可指定标签的for循环 public class ForLabel { public static void main(S ...
- vue+element实现分页--之--前端分页
效果图: 访问的数据量小,一次返回所有数据,再次利用elementUI-Table 和el-pagination组件进行展示,关键点事数据的筛选 官网的完整案例 <div class=" ...
- PHP:字符串转数组,数组转字符串;字符串截取、替换、查找
字符串转数组$str = 'one|two|three|four'; print_r(explode('|', $str)); //explode 以字符串分割字符串到数组 $str = 'one t ...
- AppWeb认证绕过漏洞(CVE-2018-8715)
影响范围 Appweb 7.0.2及早期版本. 复现 构造头Authorization: Digest username=admin 返回包里包含session 发送POST请求,添加session到 ...
- 微信JSSDK的使用步骤
步骤一:绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名".(登录后可在"开发者中心" ...
- 总结开发中基于DevExpress的Winform界面效果
DevExpress是一家全球知名的控件开发公司, DevExpress 也特指此公司出品的控件集合或某系列控件或其中某控件.我们应用最为广泛的是基于Winform的DevExpress控件组,本篇随 ...