<!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. centos7 搭建elk

    CentOS 7.x安装ELK(Elasticsearch+Logstash+Kibana)  云计算 Aug 162015 第一次听到ELK,是新浪的@ARGV 介绍内部使用ELK的情况和场景,当时 ...

  2. x264 亮度信号8x8帧内预测模式

    1 该模式的8个预测方向与4x4帧内预测模式一样. 2 该模式只有High profile及更高的Profile的才有可能使用,Baseline.Main Profile.Preset为ultrafa ...

  3. Linux 文件服务---------- nfs Server

    Linux 文件服务nfs (Network file system)#网络文件系统 ---> 远程文件调用samba #文件共享(unix /linux /windows ) ,只能适用于局域 ...

  4. iOS 解决文本(uitextfield/uitextView)在中间显示而不在顶部显示 问题

    在对应的控制器中设置下面属性 self.automaticallyAdjustsScrollViewInsets = NO; 这样就好了.

  5. python Redis

    Redis非关系型数据库,可以做消息队列功能,可以实现订阅功能,类似于广播,只要订阅道这个频道,发消息的时候,别人可以收到消息,做监控的时候,所有的客户端往一个频道上发消息,server端只有一个监听 ...

  6. python的模块！

    以下是对模块的理解,和总结 <1>模块是什么 模块是这样用的 import os 这就是导入了os模块 这和c语言里的#include<stdio.h>导入方式是一样的 导入了 ...

  7. openstack私有云布署实践【12.2 网络Neutron-controller节点配置（办公网环境）】

    网络这一块推荐使用的是 Neutron--LinuxBirdge的Ha高可用,此高可用方案对Public作用不是很大,Public只用到DHCP,而Private则会用到L3 Agent,则此方案是有 ...

  8. POJ 2656 Unhappy Jinjin

    #include <stdio.h> int main() { ) { int i, n; ; scanf("%d", &n); ) break; ; i &l ...

  9. js--学习方法之2-转

    再说几点忠告 1,不要着急看一些复杂网页效果的代码,这样除了打击你自信心,什么也学不到.没达到一定的武功水平,割了小JJ也学不会葵花宝典的. 2,别急着加技术交流QQ群,加牛人QQ.如果你找张三丰交流 ...

  10. 深耕教育行业，RealSeer联合黑晶科技发布“AR超级教室”

    近日,RealSeer开发者大赛见面会最后一站在北京举行,现场云集了不少AR创业者和开发者,各位大咖嘉宾都拿出干货与大家分享交流,公话未来AR行业发展趋势.现场RealMax联合黑晶科技发布了新品&q ...