<!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. MongoDB1： 环境安装

    1. 环境准备,不支持XP系统,需要在Windows7及以上和windows server 2008 系统上安装. 2. 下载安装包:http://www.mongodb.org/downloads, ...

  2. jetbrain phpstorm 增加或删除一个 live template

    打开\.PhpStorm2016.2\config\templates 将xml文件放入该文件夹中 重启! 单独: setting -> editor -> Live Template +

  3. 洛谷-求同构数的个数-NOIP2013提高组复赛

    题目描述 Description 所谓同构数是指这样的数,即它出现在它的平方数的右端.例如,5的平方是25 (即5×5=25),5是25右端的数,那么5就是同构数.又如,25的平方是625(即25×2 ...

  4. web前端-雅虎34条规则优化

    1.尽量减少HTTP请求次数      终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数.这是 ...

  5. sqlite增删改查

    <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&q ...

  6. Docker 基本管理

    镜像: Docker 运行容器前需要本地存在对应的镜像,如果镜像不存在本地,Docker 会从镜像仓库下载(默认是 Docker Hub 公共注册服务器中的仓库). 由于官方镜像pull很慢 我们这边 ...

  7. python修炼6

    文件操作 注:不能把open语句放在try块里,因为当打开文件出现异常时,文件对象file_object无法执行close()方法. 1.打开文件 (相当于桌面的快捷方式)f=open(文件名,模式默 ...

  8. ubuntu 文件编码错误

    linux 打开出现中文编码错误(invalid encoding): convmv -f gbk -t utf-8 -r --notest /filename

  9. 重点+超详细：ajax和json及案例

    不用jQuery的ajax流程 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht ...

  10. Js的两种post方式

    第一种提交post的方式是传统方式,判断浏览器进行post请求. var xmlobj; //定义XMLHttpRequest对象 function CreateXMLHttpRequest() { ...