<!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. 【C语言】输入一个年份和月份，输出该月的天数

    分析: 三种类型, A.2月比较特殊,平年的2月只有28天,而闰年的2月有 29 天: B.4.6.9.11月: C.其他1.3.5.7.8.10.12月. 代码: /*输入一个年份和月份,输出该月的 ...

  2. mcast_set_ttl函数

    #include <errno.h> #include <net/if.h> #include <sys/socket.h> #include <netine ...

  3. Jmeter_Http默认请求值

    1.线程组->配置原件->Http请求默认值 2.作用:几个Http 请求参数都是重复的数据 3.优先级:Http请求默认值和单个Http请求数值,使用单个Http请求数值为主 举例如下: ...

  4. windows下mysql 8.0.12安装步骤及基本使用教程

    本文实例为大家分享了windows下mysql 8.0.12安装步骤及使用教程,供大家参考,具体内容如下 补充:mysql 已经更新到了 8.0.19,大致步骤和这个差不多,照着来就完事了. 我下载的 ...

  5. Git三招

    一.Git提交指令 git init git第一次使用在当前文件夹初始化一个git仓库,第二次不需要 git add . 把当前文件夹所有文件添加到缓存区中. 可以选特定的文件夹或文件.将后面的.改变 ...

  6. 20 个新的且值得关注的 Vue 开源项目

    译者:前端小智作者:Nastassia Ovchinnikova来源:flatlogic.com 个人专栏 ES6 深入浅出已上线,深入ES6 ,通过案例学习掌握 ES6 中新特性一些使用技巧及原理, ...

  7. Win32 开发记录

    Typedefs LPCSTR = char* LPCWSTR = wchar_t* Webpages Control reference: https://docs.microsoft.com/en ...

  8. 汇编语言从入门到精通-5微机CPU的指令系统2

    微机CPU的指令系统 5.2.2 标志位操作指令 标志位操作指令是一组对标志位置位.复位.保存和恢复等操作的指令. 1.进位CF操作指令 a.清进位指令CLC(Clear Carry Flag):CF ...

  9. Servlet 学习（八）

    Filter 1.功能 Java Servlet 2.3 中新增加的功能,主要作用是对Servlet 容器的请求和响应进行检查和修改 Filter 本身并不生成请求和响应对象,它只提供过滤作用 在Se ...

  10. idea 构建maven web项目

    参考:https://blog.csdn.net/czc9309/article/details/80304074 idea Tomcat 部署 war和war exploded的区别 参考:  ht ...