zoukankan      html  css  js  c++  java
  • Bootstrap 3学习笔记 -栅格

    这是Bootstrap中非常基础一张表,但其实有这么容易掌握和理解吗?

    (1).对于col-md的div, 默认是垂直排列, 当视口(屏幕或浏览器的宽度)>992px,col-md-1的div块就水平排列了


    (2).container的div最大宽度是自适应的,根据屏幕或浏览器的"视口"宽度自动调整的,例如当"视口"宽度>=1200px时,container的div最大宽度是1170px; 当视口>=768px,<=970px container的div最大宽度是750px


    (3).当col块水平排列时,每个col块是有最宽宽度的概念, 对于col-md的div,最大列宽大概是81px(我实践测量并不是81px,求解释)

    (4).栅格类嵌套

    显示效果如下: 在这里 col-xs与 col-md 嵌套使用, 当视口>=992px时, col-md块层水平排列, col-xs不起作用,而当col-xs单独使用,是符合栅格系统基本要求,即一行只能有12个col,  所以,第2行的col-xs块就换行了.

    (5).响应式列重置 .clearfix

  • 相关阅读:
    命令行通配符教程
    无插件Vim配置文件vimrc推荐与各VIM配置项解释
    jquery.pagination.js分页插件的使用
    Alpha(4/10)
    Alpha(3/10)
    Alpha(2/10)
    Alpha(1/10)
    需求报告答辩
    项目UML设计
    项目选题报告答辩总结
  • 原文地址:https://www.cnblogs.com/zhuji/p/5421520.html
Copyright © 2011-2022 走看看