使用单一的一组 .col-md-* 栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列。所有“列(column)必须放在 ” .row 内。

  1. <div class="row">
  2. <div class="col-md-1">.col-md-1</div>
  3. <div class="col-md-1">.col-md-1</div>
  4. <div class="col-md-1">.col-md-1</div>
  5. <div class="col-md-1">.col-md-1</div>
  6. <div class="col-md-1">.col-md-1</div>
  7. <div class="col-md-1">.col-md-1</div>
  8. <div class="col-md-1">.col-md-1</div>
  9. <div class="col-md-1">.col-md-1</div>
  10. <div class="col-md-1">.col-md-1</div>
  11. <div class="col-md-1">.col-md-1</div>
  12. <div class="col-md-1">.col-md-1</div>
  13. <div class="col-md-1">.col-md-1</div>
  14. </div>
  15. <div class="row">
  16. <div class="col-md-8">.col-md-8</div>
  17. <div class="col-md-4">.col-md-4</div>
  18. </div>
  19. <div class="row">
  20. <div class="col-md-4">.col-md-4</div>
  21. <div class="col-md-4">.col-md-4</div>
  22. <div class="col-md-4">.col-md-4</div>
  23. </div>
  24. <div class="row">
  25. <div class="col-md-6">.col-md-6</div>
  26. <div class="col-md-6">.col-md-6</div>
  27. </div>

—–下面有个“顶”字,你懂得O(∩_∩)O哈哈~

—–乐于分享,共同进步!

—–更多文章请看:http://blog.csdn.net/duruiqi_fx


Bootstrap3 栅格系统-实例:从堆叠到水平排列的更多相关文章

  1. Bootstrap3 栅格系统-实例:流式布局容器

    如何让小屏幕设备上所有列不堆叠在一起,使用针对超小屏幕和中等屏幕设备所定义的类就可以做到,即 .col-xs-* 和 .col-md-*.举例: <!-- Stack the columns o ...

  2. Bootstrap3 栅格系统-实例:响应列重置(Responsive column resets)

    四层的网格你肯定会遇到问题,可用在特定的断点,你的列不清楚作为一个比另一个高完全正确.为了解决这个问题,结合使用.clearfix和响应的实用工具类. <div class="row& ...

  3. Bootstrap3 栅格系统-实例:多余的列(column)将另起一行排列

    如果在一个 .row 内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列. <div class="row"> &l ...

  4. Bootstrap3 栅格系统-实例:手机、平板、桌面

    <div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-1 ...

  5. Bootstrap3 栅格系统-简介

    Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin 用于生成更具 ...

  6. BootStrap3栅格系统与布局

    栅格系统与布局 Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks t ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例:堆叠的水平

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

  8. Bootstrap3 栅格系统-嵌套列

    为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内.被嵌套的行(row)所包含的列(column)的个 ...

  9. Bootstrap3 栅格系统-栅格参数

    通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的. -–下面有个"顶"字,你懂得O(∩_∩)O哈哈~ -–乐于分享,共同进步! -–更多文章请看:h ...

随机推荐

  1. 如何彻底解决MySQL更改默认字符集以及字符乱码问题!!!

    在我们使用MySQL数据库时,字符乱码,对我们来说是一个很头疼的问题.今天笔者就来教大家如何彻底解决更改默认字符集以及字符乱码问题. 当我们使用压缩包进行MySQL安装后,系统会使用默认的字符集,这时 ...

  2. CodeForces 918D MADMAX(博弈+记忆化搜索)

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  3. LeetCode169:Majority Element(Hash表\位操作未懂)

    题目来源: Given an array of size n, find the majority element. The majority element is the element that ...

  4. [LeetCode] Binary Tree Tilt 二叉树的坡度

    Given a binary tree, return the tilt of the whole tree. The tilt of a tree node is defined as the ab ...

  5. Java数据类型与SQL数据类型的映射

    Java数据类型与SQL数据类型的映射 SQL Data Type Java Data Type char/varchar/longvarchar String numeric/decimal jav ...

  6. [BZOJ 3329]Xorequ

    Description 题库链接 给出 \(n\) ,分别求 \(\leq n\) 和 \(\leq 2^n\) 的满足方程 \[x\oplus 3x=2x\] 的正整数解个数. \(1\leq n\ ...

  7. [Luogu 1559]运动员最佳匹配问题

    Description 题库链接 求 \(2\times N\) 个点的带权二分图最佳匹配. \(1\leq N\leq 20\) Solution 我还是太菜了啊...到现在才学 \(KM\) . ...

  8. [APIO 2012]派遣

    Description 在一个忍者的帮派里,一些忍者们被选中派遣给顾客,然后依据自己的工作获取报偿. 在这个帮派里,有一名忍者被称之为Master.除了Master以外,每名忍者都有且仅有一个上级.为 ...

  9. ●BZOJ 4310 跳蚤

    ●赘述题目 给出一个字符串,要求分成k个子串,然后求出每个子串的字典序最大的子串(我称它为子子串),要使这k个子子串中的字典序最大的那个串(即魔力串)最小.输出该魔力串. (本题个人感觉很好,比较综合 ...

  10. HDU2222 自动机(学习中)

    题目大意: 给你很多个单词,然后给你一篇文章,问给出的单词在文章中出现的次数. 解题思路: AC自动机入门题.需要注意的就是可能有重复单词 代码如下: #include<iostream> ...