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. HDU4112

    对于n*m*k的方块,用手掰成1**1的那么搜需要的步骤是固定的,为n*m*k-,如果用刀切,因为可以把多块叠在一起切,所以对于长度为n的,将他切成0,所需要的步骤数位k 对于n*m*k的方块,用手掰 ...

  2. mysql中生成列与JSON类型的索引

    MySQL中支持生成列,生成列的值是根据列定义中包含的表达式计算的. 一个简单的例子来认识生成列! CREATE TABLE triangle( sidea DOUBLE, sideb DOUBLE, ...

  3. P1879 [USACO06NOV]玉米田Corn Fields（状压dp）

    P1879 [USACO06NOV]玉米田Corn Fields 状压dp水题 看到$n,m<=12$,肯定是状压鸭 先筛去所有不合法状态,蓝后用可行的状态跑一次dp就ok了 #include& ...

  4. 2018-2019-1 20189215 《Linux内核原理与分析》第七周作业

    <庖丁解牛>第六章书本知识总结 操作系统内个实现操作系统的三大管理功能:进程管理.内存管理.文件系统.分别对应<操作系统原理>中最重要的3个抽象概念是进程.虚拟内存和文件. L ...

  5. 《Effective Java 2nd》第7章 方法

    目录 第38条 检查参数的有效性 第39条 必要时进行保护性拷贝 第40条 谨慎设计方法签名 第41条 慎用重载 第42条 慎用可变参数 第43条 返回零长度的数组或集合,而不是null 第44条 为 ...

  6. cf 429 B Working out

    B. Working out time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  7. POJ 1860 Currency Exchange（Bellman-Ford）

    https://vjudge.net/problem/POJ-1860 题意: 有多种货币,可以交换,有汇率并且需要支付手续费,判断是否能通过不断交换使本金变多. 思路: Bellman-Ford算法 ...

  8. linux中find与rm实现查找并删除目录或文件

    linux 下用find命令查找文件,rm命令删除文件. 删除指定目录下指定文件find 要查找的目录名 -name .svn |xargs rm -rf 删除指定名称的文件或文件夹: find -t ...

  9. PHP+MySql+jQuery实现的“顶”和“踩”投票功能

    index.html <!DOCTYPE HTML><html><head><meta charset="utf-8"><ti ...

  10. 使用 if 表达式

    由于 if 本质上是一个原函数,它的返回值就是满足条件分支表达式的值,因此,if 表达式也可以用作内联函数.我们以 check_positive( )为例进行说明.尽管条件表达式中不另写 return ...