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. CentOS禁用笔记本touchpad

    自己在家笔记本装来个双系统玩玩,发现触摸板很烦人,禁用! 1.安装一个小神器 yum install xorg-x11-apps 2.查看你到输入硬件对应的id,方便禁用命令 [root@huangz ...

  2. 20145333 《网络对抗技术》 PC平台逆向破解

    20145333 <网络对抗技术> PC平台逆向破解 20145333 <网络对抗技术> PC平台逆向破解 Shellcode注入 基础知识 Shellcode实际是一段代码, ...

  3. Rsync+sersync实现实时同步

    介绍: sersync主要用于服务器同步,web镜像等功能.基于boost1.43.0,inotify api,rsync command.开发.目前使用的比较多的同步解决方案是inotify-too ...

  4. Spring Boot从Controller层进行单元测试

    单元测试是程序员对代码的自测,一般公司都会严格要求单元测试,这是对自己代码的负责,也是对代码的敬畏. 一般单元测试都是测试Service层,下面我将演示从Controller层进行单元测试. 无参Co ...

  5. [数据库] - org.springframework.jdbc.CannotGetJdbcConnectionException: Could not get JDBC Connection

    MySQL的驱动改名了,如果使用原来的com.mysql.jdbc.Driver 那么会提醒驱动不正常了,那么新的MySQL驱动名为:com.mysql.cj.jdbc.Driver 之后还报错,如题 ...

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

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

  7. git status出现 fatal: Not a git repository (or any of the parent directories): .git

    fatal: Not a git repository (or any of the parent directories): .git 提示说没有.git这样一个目录,解决办法如下: git ini ...

  8. json文件为空时读取会报错

    simplejson.errors.JSONDecodeError: Expecting value: line column () 提示说是解码错误 可以用下面的方法判断json文件是否为空 imp ...

  9. 自行申请德国的VAT号码？

    我在香港/大陆地区,是否可以自行申请德国的VAT号码? 德国联邦税务局按照不同国家申请人划分成不同申请办公室,以下为德国联邦税务局负责中国境内申请人的办公室地址及联络方式: FINANZAMT BER ...

  10. ✅javascript 语法：附加子节点

    received: function(data) { $("#notifications").prepend(data.html); } 如何用原生js写出jquery的功能: 先 ...