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 ...
随机推荐
- [磁盘管理与分区]——关于分区、磁盘分区表、MBR
磁盘连接与设备文件名的关系 1. 如下图所示:
- Abstract Class与 Interface 的区别
表格 Abs ...
- Team Homework #3 软件工程在北航——IloveSE
任务要求: 采访以前上过北航 (计算机系/软件学院) 软件工程课的同学.现在上研/工作的也可以. 采访问题如下:* 平均每周花在这门课上的时间 (包括上课/作业/上机) * 平均写的代码总行数 ...
- 软件工程随堂作业--随机产生30到四则运算（c语言）
#include "stdio.h" #include "math.h" #include "stdlib.h" #include" ...
- 【转载】openldap 备份与导入 及相关问题--扩展
http://www.cnblogs.com/ccdc/p/3356518.html 摘要: 对openldap进行备份时,直接使用slapcat命令进行备份,使用ldapadd还原出现问题及解决. ...
- 典型：Eayui项目aspx页面引用js
<link href="../Scripts/easyui1.3.5/themes/default/easyui.css" rel="stylesheet" ...
- 《编写高质量代码：改善Java程序的151个建议》笔记
To fight the unthinkable,you have to be willing to do the unthinkable. 不要在循环中使用try catch,应该放在循环的外面 ...
- eclipse 中卸载插件的方法
卸载步骤: Help -> About Eclipse -> Installation Details -> "点到你要删除的插件,如EclipseME" –&g ...
- Java递归列出目录下全部文件
Java递归列出目录下全部文件 /** * 列出指定目录的全部内容 * */ import java.io.*; class hello{ public static void main(String ...
- 如何做好一名DBA【转】
我一直有一个观点:程序是暂时的,而数据是永恒的.所以我一直都认为数据的重要性在很多企业中都远远高于应用程序,在多年的工作实践中努力做好DBA的工作.而要做好一名DBA,必须要清楚作为一名DBA的职责. ...