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. AVAudioFoundation(4)：音视频录制

    本文转自:AVAudioFoundation(4):音视频录制 | www.samirchen.com 本文主要内容来自 AVFoundation Programming Guide. 采集设备的音视 ...

  2. c++第二十三天

    p124~p126: 算数运算符 1.形如+ -(一元) * / % + -(二元)为算数运算符. 2.所有算数运算符都满足左结合律. 3.算数运算符的运算对象和求值结果都是右值. 4.在表达式求值之 ...

  3. Mysql索引结构与索引原理

    Mysql索引主要包括四种,Btree索引.Hash索引.full-text全文索引.R-tree索引,因为作为一名PHP开发者,并不是专业的DBA,在这里只需要了解第一种开发相关的BTree索引. ...

  4. Ubuntu16.04 远程访问RabbitMQ

    我们在虚拟机里面安装好RabbitMQ以后,虽然可以在虚拟机中访问,但是在主机端并不能访问 现在要解决这个问题 第一:账户 RabbitMQ为了安全性考虑,默认的guest账户只能在本地127.0.0 ...

  5. Python学习札记(三十七) 面向对象编程 Object Oriented Program 8 @property

    参考:@property NOTE 1.在绑定参数时,为了避免对属性不符合逻辑的操作,需要对传入的参数进行审核. #!/usr/bin/env python3 class MyClass(object ...

  6. shell 使用ping测试网络

    能ping通返回1,不能返回0 ping -c 192.168.1.1 | grep '0 received' | wc -l

  7. Qt570_CentOS64x64_02

    1.Qt570的简单测试项目,在做"重新构建"的操作的时候,出现1个问题,Qt底下的"编译输出"窗口中的信息为: cc1plus: error: unrecog ...

  8. redis的过期策略以及内存淘汰机制

    redis采用的是定期删除+惰性删除策略. 为什么不用定时删除策略? 定时删除,用一个定时器来负责监视key,过期则自动删除.虽然内存及时释放,但是十分消耗CPU资源.在大并发请求下,CPU要将时间应 ...

  9. 不能用Xming连接到 Centos 7

    修改/etc/gdm/custom.conf 之后, Centos 6是没有问题的. 可是Centos 7 不行. 根据这个连接,运行firewall-config,把网络改到trusted级别, 能 ...

  10. css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)

    源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...