<!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. Hadoop学习2—伪分布式环境搭建

    一.准备虚拟环境 1. 虚拟环境网络设置 A.安装VMware软件并安装linux环境,本人安装的是CentOS B.安装好虚拟机后,打开网络和共享中心 -> 更改适配器设置 -> 右键V ...

  2. 迷のbug

    已解决(ps over%100写错了,应该是over/100...) #include <bits/stdc++.h> #define rep(i, a, b) for(int i = a ...

  3. SQL Server 2014安装（windows10）

    SQL Server 2014下载地址: 链接:https://pan.baidu.com/s/19_FAhoQxnxkTO_9e-e7weA 提取码:rid7

  4. Python爬虫学习教程：天猫商品数据爬虫

    天猫商品数据爬虫使用教程 下载chrome浏览器 查看chrome浏览器的版本号,下载对应版本号的chromedriver驱动 pip安装下列包 pip install selenium pip in ...

  5. Python - 查看类的方法和属性，dir()，help()

    1. dir()查看类的方法和属性 查看slice类的方法和属性 dir(slice) 2.help() 查看某个方法的文档 查看slice类中的indices方法 help(slice.indice ...

  6. python应用-pycharm新建模板默认添加shebang编码作者时间等信息

    1.pycharm4.5激活码 用户名: yueting3527 注册码: ===== LICENSE BEGIN ===== 93347-12042010 00001FMHemWIs"6w ...

  7. laravel 语言包拓展

    laravel 使用make:auth生成用户认证,登录表单是英文版本的,打开模板文件(resources/views/auth/login.blade.php),此模板文件是我们刚刚使用 make: ...

  8. Shiro入门基础

    Shiro是一个强大易用的Java安全框架,提供了认证.授权.加密和会话管理等功能. Authentication:身份认证/登录,验证用户是不是拥有相应的身份: Authorization:授权,即 ...

  9. 《实战Java高并发程序设计》读书笔记二

    第二章  Java并行程序基础 1.线程的基本操作 线程:进程是线程的容器,线程是轻量级进程,是程序执行的最小单位,使用多线程而不用多进程去进行并发程序设计是因为线程间的切换和调度的成本远远的小于进程 ...

  10. 【SSM】AppFileUtils

    11 package com.kikyo.sys.utils; import java.io.File; import java.io.IOException; import java.io.Inpu ...