zoukankan      html  css  js  c++  java
  • bootstrap笔记-栅格布局

    1.   .clearfix

    这个类可以在栅格布局中起到一个不占空间的clear的作用,如下:可以尝试带.clearfix和不带它的区别

    <div class="container-fluid" >
        <div class="row">
            <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3Resize your viewport or check it out on your phone for an example. </div>
            <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    
            <div class="clearfix visible-xs-block"></div>
    
            <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
            <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        </div>
    </div>

    2.在col栅格内再增加.row可以再次嵌套   内部嵌套满12则占满这个col栅格,不满则只占该col栅格的X/12。

    3.通过使用 .col-md-push-*.col-md-pull-* 类就可以很容易的改变列(column)的顺序。  ???

    push将在前,pull将在后

    4.栅格总结:row应该在container或者container-fluid中,col应该在row中,col-xs-x决定了占十二分之几的大小,offset将按12百分比来向右偏移,.clearfix可以不占位置的清楚两边,push在前pull在后

  • 相关阅读:
    webpack常见问题 收藏
    ES6 模块
    ES6 Class 类
    ES6 迭代器
    ES6 函数
    ES6 数组
    ES6 对象
    记一次pda(安卓)环境配置流程
    类型转换
    DOM事件
  • 原文地址:https://www.cnblogs.com/xisitan/p/4873887.html
Copyright © 2011-2022 走看看