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笔记-栅格布局的更多相关文章

  1. bootstrap的栅格布局不支持IE8该如何解决

    用bootstrap的栅格布局在IE8上出现失效的情况,通常有两种解决方式 方法/步骤   方法一:引用第三方js,一个叫respond.js的东西,github上可以搜到   方法二:由于IE8不支 ...

  2. bootstrap的栅格布局与两列布局结合使用

    在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...

  3. Bootstrap 框架 栅格布局系统设计原理

    如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下 ...

  4. 【转及总结】Bootstrap 框架 栅格布局系统底层设计原理

    如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下 ...

  5. Bootstrap内栅格布局,表格,按钮,图片的个人总结

    栅格布局: container,固定宽度的容器. container-fluid,百分百宽度的容器. 使用行(row)在水平方向上创建一组列(colmun). 每一行中最多能够包含12列,超出的列则另 ...

  6. 使用bootstrap的栅格布局,用row后出现横向滚动条

    原因: **row默认有:margin-left:-15px; margin-right:-15px: 解决办法: **row外层需要包裹container或者container-fluid,一句话就 ...

  7. css模拟Bootstrap响应式布局——栅格

    做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...

  8. bootstrap栅格布局-v客学院知识分享

    今天主要跟大家讲解下bootstrap的栅格布局,以及使用过程中应该注意的问题 首先我们要使用bootstrp的栅格布局就必须使用HTML正确的基本结构 如下图: 必须给要使用栅格布局的盒子定义cla ...

  9. bootstrap(关于栅格布局)

    栅格系统是通过行(.row)与列(column)的组合一起来创建页面布局的,所以只有列(column)可以作为行(row)的直接子元素,我们所要写的内容可以放在列里(column),不过在行的外层还需 ...

随机推荐

  1. iOS后台定位,实时向服务器发送最新位置

    第一步,开启后台模式,选中定位,选择project --> capabilities-->Backgorund Modes --> Location updates 如图: Past ...

  2. C#调用杀毒软件MSE扫描指定目录或文件

    有这样的需求,对外网文件传到服务器上时,对文件扫描是否含有病毒.微软自己的杀毒软件MSE实现了提供了命令行调用,方便我们集成到C#开发的程序里面. 命令如下: -file "E:\t&quo ...

  3. sprint演示

  4. jquery validate 自定义验证方法

    query validate有很多验证规则,但是更多的时候,需要根据特定的情况进行自定义验证规则. 这里就来聊一聊jquery validate的自定义验证. jquery validate有一个方法 ...

  5. .NET MVC3中扩展一个HtmlHelper方法CheckBoxList

    MVC中有DropDownList方法,挺好用,可是最常用的需求,一组checkboxlist咋没个类似方法呢?郁闷之余,自己做一个吧,直接上代码 public static MvcHtmlStrin ...

  6. 《zw版·Halcon-delphi系列原创教程》 只有2行代码的超市收款单ocr脚本

    <zw版·Halcon-delphi系列原创教程> 只有2行代码的超市收款单ocr脚本只有2行代码的超市收款单ocr脚本 发了这么多教程,有网友问,为什么没有ocr的.      的确,在 ...

  7. Qt之界面实现技巧

    一.主界面 1.窗口 最小化 最小化 关闭按钮 显示状态自定义 setWindowFlags(Qt::CustomireWindowHint); setWindowFlags(Qt::WindowCl ...

  8. 如何在page_load方法判断是服务器端控件引发的page_load方法

    动态获取单击的服务器端控件的id值 private string getPostBackControlName()    {        Control control=null;        s ...

  9. (顺序表的应用5.4.3)POJ 1012(约瑟夫环问题——保证前k个出队元素为后k个元素)

    /* * POJ-1012.cpp * * Created on: 2013年10月31日 * Author: Administrator */ #include <iostream> # ...

  10. WLST 命令和变量

    下列部分将详细描述 WLST 命令和变量.主题包括:  WSLT 命令类别概述  浏览命令  控制命令  部署命令  诊断命令  编辑命令  信息命令  生命周期命令  节点管理器命令  树命令  W ...