bootstrap 在超小屏布局时使用 clearfix

先看案例，一共四个 div，使用 col-xs-6, 所以在特别小型设备上时会变成两行。

不过我们发现如果第一个 div 内容多了后会变成如下图：

这里需要在第二个 div 后面加上

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

这个是意思是在特别小型尺寸中可见，并清除浮动。

最终显示如下，达到我们的要求。

bootstrap 在超小屏布局时使用 clearfix的更多相关文章

  1. 深入理解BootStrap之栅格系统（布局）

    1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...

  2. 6.bootstrap 将文本内容关联一个动作（手机端导航适配）&在超小尺寸下显示，屏幕变大后消失

    1.情景:这是出现在手机端导航适配的,点击文本MENU可以出现下拉的list 解决方法: 1.首先要想到,MENU只有两个状态,因此可以用checkbox实现 2.将MENU放在label标签里面,l ...

  3. Bootstrap历练实例：超小的按钮

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：制作一个超小按钮

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

  5. bootstrap 自适应和响应式布局的区别

    自适应:  不管屏幕多大,都尽量不换行,而只是横向缩放. 响应式: 屏幕变小了之后,属于同一行的元素受到挤压后,行的右边元素自动换行显式: 屏幕大了后,本属于同一行的元素尽可能的排在同一行内: boo ...

  6. 转:Bootstrap研究 精巧的网格布局系统

    本网格布局系统属于Scaffolding(框架,布局)部分.在Scaffolding里面有(固定)网格布局(Grid System)和流式网格布局(Fluid Grid System).本文讨论第一种 ...

  7. Bootstrap如何禁止响应式布局 不适配

    Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面,使其在各个尺寸的屏幕上表现良好.下面我们列出了如何禁用这一特性,就像这个非响应式布局实例页面一样. 禁止响应式布局有如下几步: 移除 此 ...

  8. Bootstrap如何禁止响应式布局

    Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面,使其在各个尺寸的屏幕上表现良好.下面我们列出了如何禁用这一特性,就像这个非响应式布局实例页面一样. 禁止响应式布局有如下几步: 移除 此 ...

  9. day09—css布局解决方案之全屏布局

    转行学开发,代码100天——2018-03-25 今天,本文记录全屏布局的的方法.全屏布局,即滚动条不是全局滚动条,而是出现在内容区域内,:浏览器变大时,撑满窗口. 如:设置下图中布局,其中top区, ...

随机推荐

  1. Django：用户登录实例

    Django:用户登录实例 一.源代码 1,login.html代码(登录界面): <!DOCTYPE html> <html lang="zh-CN"> ...

  2. FastDFS+Nginx分布式文件系统部署安装

    安装: ##安装tracker.storage参考:http://www.cnblogs.com/zclzhao/p/5025229.html nginx代理设置参考:http://www.cnblo ...

  3. redis未授权访问漏洞总结

    Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. 漏洞介绍: Redis 默认情况下,会绑定在 0.0.0.0 ...

  4. Java 面试题收集

    1.java有哪些常用的包 java.langjava.utiljava.iojava.netjava.sqljava.awtjava.text java.math 2.Java接口修饰符final ...

  5. Spring Boot与数据

    SpringBoot 着眼于JavaEE! 不仅仅局限于 Mybatis .JDBC. Spring Data JPA Spring Data 项目的目的是为了简化构建基于 Spring 框架应用的数 ...

  6. burnside引理&polya定理

    burnside引理&polya定理 参考资料: <polya计数法的应用>--陈瑜希 黄学长 置换: 置换即是将n个元素的染色进行交换,产生一个新的染色方案. 群: 一个元素的集 ...

  7. 【eclipse】svn在线安装

    Subclipse1.8 http://subclipse.tigris.org/update_1.8.x

  8. java分布式系统开关功能设计(服务升降级)

     ​问题一:在单个java系统中如何实现开关功能? ​    ​其实对于开关来说,对应Java中的类型,很好映射,就是一个boolean值,在需要做开关操作的地方,调用这个属性,判断状态,然后走相应的 ...

  9. Nature 为引，一文看懂个体化肿瘤疫苗前世今生

    进入2017年,当红辣子鸡PD-1疗法,一路横扫多个适应症.而CAR-T治疗的“小车”在获得FDA专委会推荐后也已经走上高速路,成为免疫治疗又一里程碑事件.PD-1.CAR-T之后,下一个免疫治疗产品 ...

  10. 《Blue Flke团队》第二次作业通讯录项目开题报告

      Just_Do_IT! N:8A:8B:7C:6D:8总分:37   Miracle-House N:8A:6B:7C:6D:8总分:35   Spring_Four N:7A:7B:8C:8D: ...