读书频道 > web开发 > 其他综合 > 深入理解Bootstrap
2.清除浮动问题
2014-05-08 11:19:20     我来说两句 
收藏    我要投稿   

本文所属图书 > 深入理解Bootstrap

本书是目前Bootstrap领域技术版本最新、内容最全面、介绍最详细、实战性最强、最具深度的著作。它是资深Web技术专家多年工作经验的结晶,不仅授人以鱼,全面讲解了Bootstrap各个功能组件的使用方法,以及对现有插  立即去当当网订购

理想是美好的,但现实是残酷的。我们来举一个美好的例子。在小型屏幕上,希望实现如图2-10所示的效果。

 

但是在超小型屏幕下,则希望每行只显示两个div元素,即如图2-11所示的效果。

 

理想很美好的,按照上述响应式栅格的建议,可能觉得应该如下设计:
<div class="row">
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

把真实内容填到div里进入,看看实际效果,如图2-12所示。

 

你肯定会说:“这是怎么回事啊!”怎么回事?所有的col-样式都是左浮动,很明显,这是因为没有清除浮动导致的。第3个div开始换行的时候,div1的内容高度过高,所以div3就在右边紧接着显示了。

要解决这个问题,需要用Bootstrap提供的clearfix样式。更新后的代码如下所示:
<div class="row">
    <div class="col-xs-6 col-sm-3">div1: .col-xs-6 .col-sm-3</div>
    <div class="col-xs-6 col-sm-3">div2: .col-xs-6 .col-sm-3</div>
    <div class="clearfix visible-xs"></div>
    <div class="col-xs-6 col-sm-3">div3: .col-xs-6 .col-sm-3</div>
    <div class="col-xs-6 col-sm-3">div4: .col-xs-6 .col-sm-3</div>
</div>

利用clearfix样式清除浮动,但是前提条件是在超小型屏幕上能显示才行(因为其是用visible-xs样式控制的)。

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:1.跨设备组合定义
下一篇:3.列偏移和列排序
相关文章
图文推荐
3.2 Windows 7设置
3.1 DNS解析
2.3 HTTP协议
2.2 TCP/IP协议与So
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站