<!DOCTYPE html>

<html>

<head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>code2</title>

        <link rel="stylesheet" href="css/bootstrap.min.css"/>

        <script type="application/javascript" src="js/jquery-1.12.3.min.js"></script>

        <script type="application/javascript" src="js/bootstrap.min.js"></script>

        <style>

            div{border:1px solid red}

        </style>

    </head>

    <body>

        <div class="container">

            <div class="row">

                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 1<br/>胡大臣数胡大臣</div>

                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 2</div>

                <div class="clearfix visible-xs"></div>

                <!--清除了3的浮动使得3排在1的下面-->

                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 3</div>

                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 4</div>

            </div>

        </div>

    </body>

</html>

bootstrap ch2清除浮动的更多相关文章

  1. bootstrap ch2清除浮动+12

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  2. 5.bootstrap栅格 清除浮动

    只要用到栅格,就注意要清除浮动,清除方法就是在父元素的class上加一个clearfix 1.情景: . <div class="col-sm-7"> <div ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：清除浮动1

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. bootstrap清除浮动问题

    所有的col-样式都是左浮动 <div class="row">    <div class="col-xs-6 col-sm-3">d ...

  5. Css清除浮动最优方式之一

    ---恢复内容开始--- .container:before, .container:after { display: table; content: " "; } .contai ...

  6. clear-fix清除浮动的两种写法

    1. [代码]clearfix 清除浮动 .clearfix:after { content: "."; display: block; height: 0; font-size: ...

  7. CSS清除浮动的方法及优缺点

    浮动是CSS布局里面用的比较多的属性.浮动的框向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 因为浮动会使当前元素产生向上浮的效果,所以浮动的元素会脱离正常的文档流,它包围的内容在 ...

  8. 关于clear与清除浮动

    今天看bootstrap突然看到了 .container:after { clear: both; } 好像对clear的用法有点模糊,于是于是又研究一下用法. 上面搜资料总会搜到张鑫旭老师的相关文章 ...

  9. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

随机推荐

  1. python 学习 ［day8］class成员

    一.类的成员 类的成员可以分为三大类:字段.方法和属性 注:所有成员中,只有普通字段的内容保存对象中,即:根据此类创建了多少对象,在内存中就有多少个普通字段.而其他的成员,则都是保存在类中,即:无论对 ...

  2. 为OLED屏增加GUI支持

    为OLED屏增加GUI支持1:OLED驱动 为OLED屏增加GUI支持2:2D图形库 为OLED屏增加GUI支持3:字库 为OLED屏增加GUI支持4:文本框控件 为OLED屏增加GUI支持5:图片控 ...

  3. JavaFX基础学习之URLConnection

    一个标准的JavaFX文件包含三个部分:主类 . 控制类. 界面设计(XML+CSS) 1,main.java package application; import javafx.applicati ...

  4. iOS 导航栏 不透明

    UINavigationBar.appearance().translucent = false UINavigationBar.appearance().barStyle = UIBarStyle. ...

  5. 嗅探js css 文件是否加载成功示例

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  6. Linux系统安装rar压缩软件

    将 hebaodans.com 目录打包为 hebaodans.rar # rar a hebaodans.rar ./hebaodans.com/ 解压 hebaodans.rar 到当前目录 # ...

  7. hdu1026

    #include <stdio.h> #include <string.h> #include <queue> using namespace std; struc ...

  8. 【转载】Recycle机制

    首先要明白,Recycle机制并不是Java中的垃圾回收机制,而是相当于一种设计模式 思想:当一个对象不再使用时,储存起来,而不是让虚拟机回收,需要的时候再用,避免对象被回收之后重分配 适用范围:对于 ...

  9. 一行一行分析JQ源码学习笔记-04

    jquery添加方法和属性 jquery.fn=jquery.prototype ={ jquery版本 } construtor  指向修正 js源码中 fun  aaa(){} 会自动生成一句   ...

  10. 一、什么是WCF

    注:本文为学习摘抄,原地址:http://www.cnblogs.com/iamlilinfeng/archive/2012/09/25/2700049.html 一.概述 Windows Commu ...