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. python webdriver grid多节点运行webdriver程序

    grid整理: 机制 Hub机器和节点机器上要装jdk和jar包 A机器:hub  中控:用来监控所有节点机的状态 启动命令: java -jar selenium-server-standalone ...

  2. 裸眼 3D 技术是什么原理？

    https://www.zhihu.com/question/19553745 作者:杨英东链接:https://www.zhihu.com/question/19553745/answer/1227 ...

  3. Java生成PDF之iTextPDF的使用

    今天做财务方面相关数据的导出功能,需要导出PDF和Excel,在项目经理那里得知有一个叫iTextPDF的java框架导出PDF文件很好用,于是拿来玩儿玩儿. package com.smart.pr ...

  4. Android实践项目汇报

    Android实践项目:推箱子 推箱子是一款来自日本的古老游戏,其设计目的是训练人的逻辑思维能力.游戏场景一般是设定在空间狭小的仓库中,要求把箱子摆放到指定位置.这就要求玩家巧妙的运用有限的空间和通道 ...

  5. OpenCV/OpenCL/OpenGL区别

    OpenCV/OpenCL/OpenGL区别: OpenGL(全写Open Graphics Library)是个定义了一个跨编程语言.跨平台的应用程序接口(API)的规格,它用于生成二维.三维图像. ...

  6. 如何用js创建表格？

    1.用js创建表格 <script> function createTable(){ //创建表格 //创建对象 //window下面的属性方法可以把window去掉或者写上 var ta ...

  7. JAVA synchronized关键字锁机制(中)

    synchronized 锁机制简单的用法,高效的执行效率使成为解决线程安全的首选. 下面总结其特性以及使用技巧,加深对其理解. 特性: 1. Java语言的关键字,当它用来修饰一个方法或者一个代码块 ...

  8. angular 自定义指令参数详解

    restrict:指令在dom中的声明形式 E(元素)A(属性)C(类名)M(注释) priority优先级:一个元素上存在两个指令,来决定那个指令被优先执行 terminal:true或false, ...

  9. Assert 类

    Assert 类 使用 true/false 命题验证单元测试中的条件. 继承层次结构     System.Object   Microsoft.VisualStudio.TestTools.Uni ...

  10. SPOJ VLATTICE Visible Lattice Points 莫比乌斯反演 难度:3

    http://www.spoj.com/problems/VLATTICE/ 明显,当gcd(x,y,z)=k,k!=1时,(x,y,z)被(x/k,y/k,z/k)遮挡,所以这道题要求的是gcd(x ...