<!DOCTYPE html>

<html>

<head>

        <meta charset="UTF-8">

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

        <title>code2</title>

        <link rel="stylesheet" href="css/bootstrap.min.css"/>

        <script type="application/javascript" src="js/jquery-1.12.3.min.js"></script>

        <script type="application/javascript" src="js/bootstrap.min.js"></script>

        <style>

            div{border:1px solid red}

        </style>

    </head>

    <body>

        <div class="container">

            <div class="row">

                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 1<br/>胡大臣数胡大臣</div>

                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 2</div>

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

                <!--清除了3的浮动使得3排在1的下面-->

                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 3</div>

                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 4</div>

            </div>

        </div>

    </body>

</html>

bootstrap ch2清除浮动的更多相关文章

  1. bootstrap ch2清除浮动+12

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  2. 5.bootstrap栅格 清除浮动

    只要用到栅格,就注意要清除浮动,清除方法就是在父元素的class上加一个clearfix 1.情景: . <div class="col-sm-7"> <div ...

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

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

  4. bootstrap清除浮动问题

    所有的col-样式都是左浮动 <div class="row">    <div class="col-xs-6 col-sm-3">d ...

  5. Css清除浮动最优方式之一

    ---恢复内容开始--- .container:before, .container:after { display: table; content: " "; } .contai ...

  6. clear-fix清除浮动的两种写法

    1. [代码]clearfix 清除浮动 .clearfix:after { content: "."; display: block; height: 0; font-size: ...

  7. CSS清除浮动的方法及优缺点

    浮动是CSS布局里面用的比较多的属性.浮动的框向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 因为浮动会使当前元素产生向上浮的效果,所以浮动的元素会脱离正常的文档流,它包围的内容在 ...

  8. 关于clear与清除浮动

    今天看bootstrap突然看到了 .container:after { clear: both; } 好像对clear的用法有点模糊,于是于是又研究一下用法. 上面搜资料总会搜到张鑫旭老师的相关文章 ...

  9. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

随机推荐

  1. redis超时问题分析

    redis超时问题分析 06/04. 2014 Redis在分布式应用中占据着越来越重要的地位,短短的几万行代码,实现了一个高性能的数据存储服务.最近dump中心的cm8集群出现过 几次redis超时 ...

  2. 总结的OSM 地图相关的分析

    How OSM works:  Tile Format: png,  z: levels [0- 18], x: Latitude [0- ], y: Longitude [0- ];         ...

  3. 《C程序设计语言》 squeeze函数（从字符串s中删除字符c）

    squeeze void squeeze(char string[], int ch) { int i, j; ; string[i] != '\0'; i++) { if (string[i] != ...

  4. EFI Shell 命令说明

    EFI Shell 命令说明 引导命令 — EFI Shell 与 nPartition 引导有关的命令. autoboot         设置(查看)自动引导超时变量. bcfg 显示(或修改)驱 ...

  5. php浏览历史记录的方法

    本文实例讲述了php浏览历史记录的方法.分享给大家供大家参考.具体实现方法如下: /** * 商品历史浏览记录 * $data 商品记录信息 */private function _history($ ...

  6. Swift2.3适配Swift3.0时出现的各种问题

    昨晚上一波手贱把我的小5s升到iOS10.如此配套的话,Xcode7.3升级Xcode8.1看来也是势在必行了.公司程序是Swift2.3的,出于对苹果的恐惧迟迟不敢升级.但丑媳妇儿总要见公婆,借这个 ...

  7. Git Github jekyll,gem Liquid模板语言 Markdown

    Git Git教程  常用 Git 命令清单   Git远程操作详解  使用jekyll建立个人网站 Git is a free and open source distributed version ...

  8. liunx下试用yum进行php及opchache扩展安装

    Centos 6.6 环境: php 5.6.29 nginx:1.10.2 1.配置安装包源 # CentOs 6.x rpm -Uvh http://mirror.webtatic.com/yum ...

  9. TI公司与MSP430单片机

    美国德州仪器(Texas Instruments)公司,简称TI,是全球领先的半导体公司,成立于1930 年,成立之初是一家使用地震信号处理技术勘探原油的地质勘探公司,1951年更名为德州仪器公司,1 ...

  10. js-字符串函数

    js字符串函数 JS自带函数concat将两个或多个字符的文本组合起来,返回一个新的字符串.var a = "hello";var b = ",world";v ...