1. .clearfix
这个类可以在栅格布局中起到一个不占空间的clear的作用,如下:可以尝试带.clearfix
和不带它的区别
<div class="container-fluid" >
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3Resize your viewport or check it out on your phone for an example. </div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
</div>
2.在col栅格内再增加.row可以再次嵌套 内部嵌套满12则占满这个col栅格,不满则只占该col栅格的X/12。
3.通过使用 .col-md-push-*
和 .col-md-pull-*
类就可以很容易的改变列(column)的顺序。 ???
push将在前,pull将在后
4.栅格总结:row应该在container或者container-fluid中,col应该在row中,col-xs-x决定了占十二分之几的大小,offset将按12百分比来向右偏移,.clearfix可以不占位置的清楚两边,push在前pull在后
bootstrap笔记-栅格布局的更多相关文章
-
bootstrap的栅格布局不支持IE8该如何解决
用bootstrap的栅格布局在IE8上出现失效的情况,通常有两种解决方式 方法/步骤 方法一:引用第三方js,一个叫respond.js的东西,github上可以搜到 方法二:由于IE8不支 ...
-
bootstrap的栅格布局与两列布局结合使用
在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...
-
Bootstrap 框架 栅格布局系统设计原理
如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下 ...
-
【转及总结】Bootstrap 框架 栅格布局系统底层设计原理
如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下 ...
-
Bootstrap内栅格布局,表格,按钮,图片的个人总结
栅格布局: container,固定宽度的容器. container-fluid,百分百宽度的容器. 使用行(row)在水平方向上创建一组列(colmun). 每一行中最多能够包含12列,超出的列则另 ...
-
使用bootstrap的栅格布局,用row后出现横向滚动条
原因: **row默认有:margin-left:-15px; margin-right:-15px: 解决办法: **row外层需要包裹container或者container-fluid,一句话就 ...
-
css模拟Bootstrap响应式布局——栅格
做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...
-
bootstrap栅格布局-v客学院知识分享
今天主要跟大家讲解下bootstrap的栅格布局,以及使用过程中应该注意的问题 首先我们要使用bootstrp的栅格布局就必须使用HTML正确的基本结构 如下图: 必须给要使用栅格布局的盒子定义cla ...
-
bootstrap(关于栅格布局)
栅格系统是通过行(.row)与列(column)的组合一起来创建页面布局的,所以只有列(column)可以作为行(row)的直接子元素,我们所要写的内容可以放在列里(column),不过在行的外层还需 ...
随机推荐
-
iOS 9 关键字的简单使用
前言: 在iOS 9 苹果推出了很多关键字, 目的其实很明确, 主要就是提高开发人员的效率, 有益于程序员之间的沟通与交流, 在开发中代码更加规范! 1. nullable 与 nonnull nul ...
-
SPOJ 375 (树链剖分+线段树)
题意:一棵包含N 个结点的树,每条边都有一个权值,要求模拟两种操作:(1)改变某条边的权值,(2)询问U,V 之间的路径中权值最大的边. 思路:最近比赛总是看到有树链剖分的题目,就看了论文,做了这题, ...
-
如何下载coursera视频
国内观看Coursera非常卡顿,经常播放到一半就卡死了,不知道什么原因.因此只能想办法下载下来之后再看. Github上有一个脚本点击打开链接,提供整门课程的下载服务.用着还是非常方便的,使用方法如 ...
-
Android_NFC_开发介绍
API概览 Android.nfc 和android.nfc.tech 为android 处理nfc的java 包. 1.Android.nfc package包含顶层类用来与本地NFC适配器交互. ...
-
“Will not add file alias &#39;samefile&#39; (&#39;SameFile&#39; already exists in index)” when `git add/commit` operation
从远程仓库pull下来的代码有两个类类名首字母小写出现如下情况 然后我想删了重新写一下(就是把这个类删了,代码复制到名字正确的类里面),然后commit的时候出现这个错误,后来删一个commit一下, ...
-
FTP连接池
我们项目使用的是 Apache的(commons-net-3.2.jar) FTPClient,但是系统偶尔会有异常,趁着刚解决完,总结一下. 日志中提示是类似 java.lang.Exception ...
-
Educational Codeforces Round 55 (Rated for Div. 2) B. Vova and Trophies
传送门 https://www.cnblogs.com/violet-acmer/p/10035971.html 题意: Vova有n个奖杯,这n个奖杯全部是金奖或银奖,Vova将所有奖杯排成一排,你 ...
-
P2064进制转换
题目:https://www.luogu.org/problemnew/show/P2084 既然这道题放在字符串类型里,那么这里的N肯定得用字符数组来储存(这样也方便输出). 那么我们不妨定义一个字 ...
-
【linux系列】压缩和解压缩tar
tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个.下面的 ...
-
apue.3e 的安装 (基于ubuntu12.0.4)
本菜刚刚学习UNIX下高级编程,无奈搭建本书编程环境时遇到不少问题.幸好网上有各种大神的解决办法让我最终解决了问题.在这里感谢为LINUX开源操作系统奋斗的大神. 不过话说回来,网上大都是针对UNIX ...