zoukankan      html  css  js  c++  java
  • clearfix的应用

    之前遇到一个问题,引用Bootstrap框架时

    一行显示四个模块,小屏幕时显示两个模块

    当内容一样时,大小屏幕时一样的,但是当其中一个和另一个内容不同时,展示效果就会有错乱

      <div class="container">
        <div class="row">
        	<div class="col-xs-6 col-sm-3 test01"><span>div1: .col-xs-6 .col-sm-3多点内容多点内容多点内容多点内容多点内容多点内容</span></div>
            <div class="col-xs-6 col-sm-3 test01"><span>div2: .col-xs-6 .col-sm-3</span></div>
            <div class="col-xs-6 col-sm-3 test01"><span>div3: .col-xs-6 .col-sm-3</span></div>
            <div class="col-xs-6 col-sm-3 test01"><span>div4: .col-xs-6 .col-sm-3</span></div>
        </div>
      </div> 
    

    后来查了一下资料,原来是没有清除浮动

      <div class="container">
        <div class="row">
        	<div class="col-xs-6 col-sm-3 test01"><span>div1: .col-xs-6 .col-sm-3多点内容多点内容多点内容多点内容多点内容多点内容</span></div>
            <div class="col-xs-6 col-sm-3 test01"><span>div2: .col-xs-6 .col-sm-3</span></div>
            <div class="clearfix visible-xs"></div>
            <div class="col-xs-6 col-sm-3 test01"><span>div3: .col-xs-6 .col-sm-3</span></div>
            <div class="col-xs-6 col-sm-3 test01"><span>div4: .col-xs-6 .col-sm-3</span></div>
        </div>
      </div> 
    

     增加了<div class="clearfix visible-xs"></div> 因为只在超小屏幕清除浮动 所以引用visible-xs样式控制

     

  • 相关阅读:
    luogu 2742 二维凸包
    poj2398 Toy Storage 计算几何,叉积,二分
    luoguP1742 最小圆覆盖
    bzoj4501 旅行
    cf1173 D. Nauuo and Circle
    bzoj3745: [Coci2015]Norma 分治,单调队列
    bzoj1176: [Balkan2007]Mokia cdq
    luoguP3964 [TJOI2013]松鼠聚会
    浅谈数学期望
    tarjan模板(带注释)
  • 原文地址:https://www.cnblogs.com/wangbei2016/p/6093158.html
Copyright © 2011-2022 走看看