<!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. SVN解锁失败的解决办法

    背景:在版本发布后,本人把工程文件上锁后,进行过修改但没有进行上传.后面一段时间后,开发人员需要进行修改提交,发现解锁不成功. 使用解锁命令时:提示如下: If you want to break t ...

  2. Python语法点滴

    string: string.capitalize()  把字符串的第一个字符大写 string.startswith(obj)  string.endswith(obj) string.find(s ...

  3. Jquery - UI - Dialog（转）

    jQuery UI Dialog常用的参数有: 1.autoOpen:默认true,即dialog方法创建就显示对话框 2.buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式: ...

  4. ZZNU 1992: 情人节的尴尬

    题目描述 情人节这不刚过去没多久吗,我得给大家爆个料.这个事关于小飞飞的,小飞飞呢,要给她女票买礼物,但是呢有个比较尴尬的事情,小飞飞有些钱在某宝里,有些钱在某东里,众所周知,这俩可是死对头,想相互转 ...

  5. ImageView.ScaleType设置图解

    图文相配很清晰的看出每个属性的效果, 感觉 CENTER_CROP 比较有用,长宽自动适应 ImageView ,整个图片自动缩略填充整个区域且居中显示(高宽不一定是view的尺寸),以前用JS在网页 ...

  6. USACO 1.5 Prime Palindromes

    Prime Palindromes The number 151 is a prime palindrome because it is both a prime number and a palin ...

  7. 在ASP.NET Web Forms中使用页面导出伪xls Excel表格

    将数据导出为Excel表格是比较常见的需求,也有很多组件支持导出真正的Excel表格.由于Excel能打开HTML文件,并支持其中的table元素以及p之类的文本元素的显示,所以把.html扩展名改为 ...

  8. iOS开发传感器相关

    手机里面内置了很多的传感器,例如:光传感器,湿度传感器,温度传感器,距离传感器等等 //开发传感器相关的东西必须使用真机 //在螺旋仪和加速计所有两种方式push和pull的方式,push的方式是时时 ...

  9. 双击td字段,出现编辑文本框(更改之后发送数据请求) jsp

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head ...

  10. MongoDB高级操作

    参考MongoDB菜鸟教程 一.$type操作符 MongoDB 中可以使用的类型如下表所示: 类型 数字 备注 Double 1   String 2   Object 3   Array 4   ...