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样式控制

     

  • 相关阅读:
    JSP 静态文件路径配置
    java 类拷贝
    spring security demo
    NYOJ-1057-寻找最大数(三)
    nyoj-1036-非洲小孩
    POJ-3617-Best Cow Line
    NYOJ-891-找点
    大平神出的一道双向链表题
    ZOJ-1360 || POJ-1328——Radar Installation
    POJ-2386-Lake Counting
  • 原文地址:https://www.cnblogs.com/wangbei2016/p/6093158.html
Copyright © 2011-2022 走看看