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. jQuery的$.get和$.ajax函数对比

    $.get较为简便,但在精细控制上乏力$.get(    url, // 请求的地址    {url:url,remark:remark},// 请求参数    function(data,textS ...

  2. objective c实现配置文件+反射

    1. 先写plist配置文件 plist写到resouce里面去 通过NSBundle把数据取plist读出来 2. 通过NSClassFromString创建类 NSClassFromString ...

  3. join用法

    join命令可以将多个文件结合在一起,每个文件里的每条记录,都共享一个键值(key),键值指的是记录中的主字段,通常会是用户名称.个人姓氏.员工编号之类的数据. join - join lines o ...

  4. Python之路-python(Queue队列、进程、Gevent协程、Select\Poll\Epoll异步IO与事件驱动)

    一.进程: 1.语法 2.进程间通讯 3.进程池 二.Gevent协程 三.Select\Poll\Epoll异步IO与事件驱动 一.进程: 1.语法 简单的启动线程语法 def run(name): ...

  5. jq数组,得到遍历生成的id后面的id

    //商品选择完成跳转到提交订单页面 function orderDetails(){ var shopCarIds = [];//存放商品的数组 var objs = []; objs = $(&qu ...

  6. Java Servlet(六):HttpServlet实现原理(jdk7+tomcat7+eclipse)

    本篇记录了HttpServlet的实现过程,主要讲述了如何依赖Servlet,GenericServlet实现的原理. HttpServlet实现过程:1.是一个Servlet,继承自GenericS ...

  7. 学习OpenCV——KNN算法

    转自:http://blog.csdn.net/lyflower/article/details/1728642 文本分类中KNN算法,该方法的思路非常简单直观:如果一个样本在特征空间中的k个最相似( ...

  8. Leetcode: Non-overlapping Intervals

    Given a collection of intervals, find the minimum number of intervals you need to remove to make the ...

  9. a c lang in linux

    create shortcut: ln -s sourcepath -destdirectoryln -s /home/tell/calos /home/桌面 #include <iostrea ...

  10. 1.1 C#简介

    大家好,这是我的C#(读做 "C sharp")学习之旅,先简介一下我了解的C#吧! 首先,说到C#,就不得不提到微软的.NET..NET是微软推出的软件开发和运行平台,允许应用程 ...