<!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. 5_3 安迪的第一个字典（UVa10815）<set的使用>

    Andy 是个 8 岁的孩子,他梦想要制作一本他自己的字典. 这并不是一件容易的事,因为他认识的字还不是那么多. 他并不想要自己去想这本字典中该放哪些字,他有个聪明的主意. 就是拿出他最喜欢的一本故事 ...

  2. 【代码审计】VAuditDemo 前台搜索功能反射型XSS

    在 search.php中 $_GET['search']未经过任何过滤就被输出 可能存在反射型XSS

  3. typo3 网站迁移

    最近再弄这个typo3,虽然说看不怎么动,但是迁移嘛,最笨的办法就是整体过去,就是数据量太大了,哈哈,我先写一下我的笨办法: 注意:每个版本的typo3对php,mysql,apache的版本都有要求 ...

  4. 吴裕雄--天生自然Numpy库学习笔记：NumPy 高级索引

    import numpy as np x = np.array([[1, 2], [3, 4], [5, 6]]) y = x[[0,1,2], [0,1,0]] print (y) import n ...

  5. C++11特性中基于范围的for循环

    本文摘录柳神笔记:   除了像C语⾔的for语句 for (i = 0; i < arr.size(); i++) 这样,C++11标准还为C++添加了⼀种新的 for 循环⽅ 式,叫做基于范围 ...

  6. linux可执行程序调试

    gdb调试不用多说 ./testapp  2>%261  适合线上问题排查,可打印程序错误接口代码 ldd testapp  查看代码动态链接程序是否正常

  7. 迭代器对象numpy.nditer在数组上进行迭代——修改数组的值

    nditer对象有另一个可选参数op_flags,默认情况下,nditer将视待迭代遍历的数组为只读对象(read-only),为了在遍历数组的同时,实现对数组元素值得修改,必须指定op_flags= ...

  8. vue项目注意事项

    vue项目注意事项 1. 文件和路由命名规范 views里面代表的是你下面导航中的每一块,每个文件名 需要大写,路由命名全部小写,第一层路由就是最下面的那几个导航的名字,二级路由是在一 级路由的基础上 ...

  9. Windows平台VC++ 6.0 下的网络编程学习 - 简单的测试winsock.h头文件

    最近学习数据结构和算法学得有点累了(貌似也没那么累...)...找了本网络编程翻了翻当做打一个小基础吧,打算一边继续学习数据结构一边也看看网络编程相关的... 简单的第一次尝试,就大致梳理一下看书+自 ...

  10. mybatis 无效字符

    只想说 是真的坑啊!!!!!sql就是对 但就是报错无效字符..... 一.sql后有 “:”,我觉得这个应该坑了很多人了 二.标签后有类似于空格的东西(我也不知道是tab还是空格,反正删完就对了) ...