Bootstrap的clearfix
1.div的内容太多会导致后面的div错位
<!DOCTYPE html>
<html>
<head>
<title>自定义占满wgnu</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <!-- 可选的Bootstrap主题文件（一般不使用） -->
<!-- <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>--> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div>
<div class="row" style="background:red;">
<div class="col-xs-6 col-sm-3 col-md-6 col-lg-3" style="background:pink;">a1内容太多内容太多内容太多内容太多内容太多内容太多内容太多内容太多内容太多内容太多内容太多内容太多内容太多内容太多内容太多</div>
<div class="col-xs-6 col-sm-3 col-md-6 col-lg-3" style="background:purple;">a2</div>
<div class="col-xs-6 col-sm-3 col-md-6 col-lg-3" style="background:orange;">b1</div>
<div class="col-xs-6 col-sm-3 col-md-6 col-lg-3" style="background:green;">b2</div>
</div>
</div>
</body>
</html>
2.增加clearfix，修复错位
<!DOCTYPE html>
<html>
<head>
<title>自定义占满wgnu</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <!-- 可选的Bootstrap主题文件（一般不使用） -->
<!-- <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>--> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div>
<div class="row" style="background:red;">
<div class="col-xs-6 col-sm-3 col-md-6 col-lg-3" style="background:pink;">a1内容太多内容太多内容太多内容太多内容太多内容太多内容太多内容太多内容太多内容太多内容太多内容太多内容太多内容太多内容太多</div>
<div class="col-xs-6 col-sm-3 col-md-6 col-lg-3" style="background:purple;">a2</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3 col-md-6 col-lg-3" style="background:orange;">b1</div>
<div class="col-xs-6 col-sm-3 col-md-6 col-lg-3" style="background:green;">b2</div>
</div>
</div>
</body>
</html>
bootstrap中的源码是通过增加伪类和clear:both实现的，如下：
.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.panel-body:before,
.panel-body:after,
.modal-footer:before,
.modal-footer:after {
display: table;
content: " ";
}
.clearfix:after,
.dl-horizontal dd:after,
.container:after,
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.panel-body:after,
.modal-footer:after {
clear: both;
}
Bootstrap的clearfix的更多相关文章
- bootstrap之clearfix
bootstrap之clearfix 在bootstrap辅助类中有那么一类,是这么定义的: 利用clearfix样式清除浮动,但是前提条件是在超小型屏幕上能显示才行(因为其是用visible-xs样 ...
- clearfix 兼容IE6/IE7，解决ie6/ie7下多出一行的问题，bootstrap的clearfix的bug
.clearfix:before, .clearfix:after { content: "."; display: block; height: ; overflow: hidd ...
- bootstrap 3.0 LESS源代码浅析（一）
我一直以为Bootstrap的LESS源代码精髓在mixins.less,所以这个系列主要也是讲解mixins.less的. 什么是mixins? 混入,或者翻译成混合.官网的说法是:我们可以定义一些 ...
- 浅谈css的伪元素::after和::before
css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...
- bootstrap 在超小屏布局时使用 clearfix
bootstrap 在超小屏布局时使用 clearfix 先看案例,一共四个 div,使用 col-xs-6, 所以在特别小型设备上时会变成两行. 不过我们发现如果第一个 div 内容多了后会变成如下 ...
- bootstrap样式：.clearfix
我们知道,在静态页面的编写中,清除浮动是一件很繁琐的事情. 所以一般的CSS框架都会有用来清除浮动的样式. 在bootstrap中,这个样式叫 clearfix. 只要在需要清除浮动的元素的父元素加上 ...
- Bootstrap 快速人门案例——前端最火的插件
今天,我给小白们分享一下比较流行的Bootstrap框架,它在工作中得到许多公司的青睐,因此对于升职和加薪很重要.同时,我们可以快速完成开发任务,减少发开周期,有不对的地方望大家指正. 如果你想走的更 ...
- 制作宅基腐主页 && 制作个人简历--材料：BootStrap
宅基腐主页 主页分为四大板块:导航栏,轮播图,主页内容,相关信息. 导航栏:<nav>标签,class="navbar",navbar-inverse为反色,navba ...
- clearfix的应用
之前遇到一个问题,引用Bootstrap框架时 一行显示四个模块,小屏幕时显示两个模块 当内容一样时,大小屏幕时一样的,但是当其中一个和另一个内容不同时,展示效果就会有错乱 <div class ...
随机推荐
- 2. VS使用---HelloWorld
摘要: ------------------------------------------------------------------------------------- 1. VS2010里 ...
- P1643: [Usaco2007 Oct]Bessie's Secret Pasture 贝茜的秘密草坪
呵呵呵呵呵,很水的DP,同时能够朴素枚举出来,这数据弱的 是 吃了尸米吧.. var n,i,j,k,l,ans:longint; begin readln(n); to trunc(sqrt(n)) ...
- WPF多窗口传参解决方案
在WPF中,我们的常常涉及到多个窗口之间传递参数的问题,那么该怎么传呢? 答:在窗口的构造函数中添加想要传递的参数.(我表达不好,请看下面代码.) 在主窗口中单机button打开一个新的子窗口. // ...
- 【每日scrum】NO.1
今天我们小组正式开始了冲刺,问题还是不少的,有必要记录下来来指导和改进后续的工作: 1.负责去找地图,却发现地图不能很好的适应我们的软件,略心塞>>> 2.本来计划把迪杰斯特拉算法看 ...
- Node.js 学习（一） 安装配置
Windowv 上安装Node.js Windows 安装包(.msi) : 32 位安装包下载地址 : http://nodejs.org/dist/v0.10.26/node-v0.10.26-x ...
- MVC5 + EF6 入门完整教程 （1）
第0课 从0开始 ASP.NET MVC开发模式和传统的WebForm开发模式相比,增加了很多"约定". 直接讲这些 "约定" 会让人困惑,而且东西太多容易忘记 ...
- 好书推荐——《Soft Skill》
这本书不是一本简单的叙述程序员职业规划和如何提高能力的书. 他论述了如何做一个高产,快乐,幸福的程序员,包括职业生涯,理财,学习,健身,信仰等各个方面的内容. 推荐给每一位伟大的拯救宇宙的程序员! 书 ...
- bzoj 2697 贪心
就贪心就行了,首先可以看成n个格子,放物品,那么 一个物品假设放3个,放在1,k,n处,那么价值和放在1,n 是一样的,所以一个物品只放两个就行了,价值大的应该尽量放 在两边,那么排序之后模拟就行了 ...
- BZOJ1143 [CTSC2008] 祭祀river
AC通道:http://www.lydsy.com/JudgeOnline/problem.php?id=1143 题目大意: 给你n个点,点与点之间由有向边相连.如果u能到达v的话,那么他们就不能同 ...
- Hdu 1429 胜利大逃亡(续) 分类： Brush Mode 2014-08-07 17:01 92人阅读 评论(0) 收藏
胜利大逃亡(续) Time Limit : 4000/2000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Subm ...