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. Windows Server 2008 R2 创建辅助DNS服务器并接管主要DNS服务器

    公司需求: Zhuyu公司局域网有一台主要DNS服务器,经领导讨论需要规划安装一台辅助DNS服务器备用. 功能需求: 当主要DNS服务器宕机或系统崩溃,辅助DNS服务器能接管主要DNS服务器工作,并且 ...

  2. jQuery源代码学习之五——jQuery.when

    jQuery.when提供了基于一个或多个对象的状态来执行回调函数的功能,通常是基于具有异步事件的异步队列. 如果传入多个异步队列,jQuery.when会返回一个新的主异步队列的只读副本(promi ...

  3. 使用Karma 来进行 JavaScript 测试

    最近接触了一些新的前端开发知识,主要是利用AngularJS做single page application.我也借这个机会,花了几天时间了解了如何对javascript进行测试. 这里将介绍一些使用 ...

  4. Velocity(10)——指令的转义

    引用的转义使用"\",指令的转义也是使用"\".但是,指令的转义要比引用的转义复杂很多.例如: #if($foo) Go! #end $foo为true,输出G ...

  5. poj 1888 Crossword Answers 模拟题

    Crossword Answers Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 869   Accepted: 405 D ...

  6. spring aop 中获取 request

    使用aop时需要request 和response 使用方法调用时 HttpServletRequest request = ((ServletRequestAttributes)RequestCon ...

  7. visual studio code + Nodejs + Typescritpt + angularjs2 + bootstrap 环境搭建/Elementary os

    1.apt-get update 99% waiting for headers卡住了,fix如下 sudo apt-get clean cd /var/lib/apt sudo mv lists l ...

  8. Signalr简单例子

    一.需要引用的 Js: 二.编码 用的是signalr2,需要新建Startup.cs类,编码如下: using Microsoft.Owin; using Owin; using System; u ...

  9. Unity本身制作keystore

    网上有不少利用jdk生成keystore的介绍.本身复杂不容易理解.作为一个Unity游戏开发者,制作keystore不需要这么麻烦.应为Unity本身就自带了制作keystore的功能.下面介绍制作 ...

  10. C# 的Brush 及相关颜色的操作 (并不是全转)

    C# 的Brush 及相关颜色的操作 2013-12-13 14:08             4977人阅读             评论(0)             收藏             ...