<!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. POJ 3041 Asteroids（二分图 && 匈牙利算法 && 最小点覆盖）

    嗯... 题目链接:http://poj.org/problem?id=3041 这道题的思想比较奇特: 把x坐标.y坐标分别看成是二分图两边的点,如果(x,y)上有行星,则将(x,y)之间连一条边, ...

  2. 关于强化神兽（圣兽）DBC参数详解

    狗的攻击类型是114,名称.攻击类型.攻击图像.怪物样子.怪物等级.不死系.破隐身.经验值.生命值.魔法值.防御.魔防.最小攻击.最大攻击.魔法力.道术力.敏捷.准确.行走速度.一步几格.行走等待.攻 ...

  3. centos7 安装pip2和pip3

    linux pip2 安装cd /usr/bin yum install -y epel-release yum install -y python-pip _____________________ ...

  4. SQLite3介绍

    一.SQLite数据库简介 SQLite 是一个软件库,实现了自给自足的.无服务器的.零配置的.事务性的 SQL 数据库引擎.SQLite 是在世界上最广泛部署的 SQL 数据库引擎. DDL - 数 ...

  5. laravel 监听模型创建事件

    注意:

  6. photoshop下载（ps）

    https://pan.baidu.com/s/1bNrUod2n1VqsA7Fr9RHtsg

  7. 源代码管理工具(2)——SVN(2)——第一次用SVN遇到的问题

    今天因为项目的需要第一次使用了svn来托管项目,第一使用svn遇到了几个问题. 这个安装的过程很简单,不再赘述.在安装完成之后,相信肯定有一部分第一次用这个的人直接到开始处打开这个软件,这时候就会弹出 ...

  8. WLC3504 HA配置

    1.WLC3504 HA连接方式 2.说明 WLC3504可以支持HA,AP SSO和Client SSO. 也是通过RP端口去连接,从active到standby-hot设备同步设备配置包括mana ...

  9. 重新梳理IT知识之java-03循环

    引用变量时要给变量赋值,如果循环进不去就会报错. 一.循环结构的四要素 1.初始化条件 2.循环条件 ---> 是Boolean类型 3.循环体 4.迭代条件 说明:通常情况下,循环结束都是因为 ...

  10. 谈一谈并查集QAQ（上）

    最近几日理了理学过的很多oi知识...发现不知不觉就有很多的知识忘记了... 在聊聊并查集的时候顺便当作巩固吧.... 什么是并查集呢? ( Union Find Set ) 是一种用于处理分离集合的 ...