<!DOCTYPE html>

<html>

    <head>

        <title>Bootstrap .clearfix 实例</title>

        <meta charset="utf-8">

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

        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>

        <div class="container-fluid">

            <h1>Hello World!</h1>

            <div class="row">

                <div class="col-xs-6 col-sm-3" style="background-color:lavender;">

                    列 1<br>

                    重置窗口大小，查看效果。也尝试删除有 clearfix  的 div 查看效果。

                </div>

                <div class="col-xs-6 col-sm-3" style="background-color:lavenderblush;">列 2</div>

                <!-- Add clearfix for only the required viewport -->

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

                <div class="col-xs-6 col-sm-3" style="background-color:lightcyan;">列 3</div>

                <div class="col-xs-6 col-sm-3" style="background-color:lightgray;">列 4</div>

            </div>

        </div>

    </body>

</html>

吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：清除浮动的更多相关文章

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

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

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：显示下拉式功能

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

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：显示关闭按钮

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

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：将页面元素所包含的文本内容替换为背景图

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

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：在元素获取焦点时显示(如：键盘操作的用户)

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

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：除了屏幕阅读器外，其他设备上隐藏元素

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

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：强制元素隐藏

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

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：设置元素为 display:block 并居中显示

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

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：元素浮动到右边

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

随机推荐

  1. 《【架构设计之道】这一波优雅的操作，会把你的中间件系统架构带到另一个Level》阅读笔记

    (1)    Master-Slave架构 这个中间件系统的本质是希望能够用分布式的方式来处理一些数据,但是具体的作用涉及到核心技术,这里不能直接说明. 但是他的核心思想,就是把数据分发到很多台机器上 ...

  2. python练习：使用二分法查找求近似平方根，使用二分法查找求近似立方根。

    python练习:使用二分法查找求近似平方根,使用二分法查找求近似立方根. 重难点:原理为一个数的平方根一定在,0到这个数之间,那么就对这之间的数,进行二分遍历.精确度的使用.通过最高值和最低值确定二 ...

  3. 「WC2013」糖果公园

    「WC2013」糖果公园 传送门 树上带修莫队板子题. 看懂题意后就是板子题了. 参考代码: #include <algorithm> #include <cstdio> #i ...

  4. 嵌入式大赛PPT

    题目:基于SLAM的移动机器人设计 嵌入式PPT应具有的几个部分 1.有哪些硬件 1)小车 2)STM32F429开发板 3)树莓派3b+开发板 4)4g通信模块 5)GPS模块 6)Kinect摄像 ...

  5. linux下的apache服务自启动的几种方式

    1,如果是安装包安装在Linux系统下,那么可以使用 [root@localhost ~]# service httpd restart 从而可以开启或者重启apache服务 与此同时,它的标准方式是 ...

  6. vue 中 限制 input 输入数字、小数位数等

    限制小数位数 <input type="number" @keydown="handleInput2" placeholder="请输入或查看& ...

  7. Springboot学习：SpringMVC自动配置

    Spring MVC auto-configuration Spring Boot 自动配置好了SpringMVC 以下是SpringBoot对SpringMVC的默认配置:==(WebMvcAuto ...

  8. python splash scrapy

    python splash scrapy 1.      前言 slpash是一个渲染引擎,它有自己的api,可以直接访问splash服务的http接口,但也有对应的包python-splash方便调 ...

  9. java 8 list的stream操作 list中的对象中的某一个成员取出转为该成员的list，以及对象过滤，筛选某个属性后的成员

    取成员属性list List<String> configList = codeEntityList.stream().map(t -> t.getName()).distinct( ...

  10. 【PAT甲级】1002 A+B for Polynomials (25 分)

    题意:给出两个多项式,计算两个多项式的和,并以指数从大到小输出多项式的指数个数,指数和系数. AAAAAccepted code: #include<bits/stdc++.h> usin ...