Bootstarp 基础 栅格系统的使用

如果要使用栅格系统 那么我们需要先把我们的东西放到一个容器之中 bootstarp已经为我们实现定义好了

<div class="container">
    <div class="row">
        <div class="col-md-4">col-md-1</div>
        <div class="col-md-4">col-md-1</div>
        <div class="col-md-4">col-md-1</div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">col-md-1</div>
        <div class="col-md-4">col-md-1</div>
        <div class="col-md-4">col-md-1</div>
    </div>
</div>

栅格系统分12格 cod-someting-number 代表了具体占几格 而这个格子到底多大 依靠的是父container这个容器来的 普通的container是按照设备分辨率自动有一个大小 container-fluid则是默认全屏的一个宽度

1.列组合
在栅格系统的使用中 要注意的是 如果你设置了xs下的栅格为6 那么他无论是在什么分辨率中都被划分成container的一半 但是你设置了lg的栅格为6 在小分辨率中是不会被继承的 所以栅格具有移动优先的特点

2.列偏移

<div class="row">
        <div class="col-md-2 col-md-offset-3">col-md-2</div>
        <div class="col-md-2 col-md-offset-1">col-md-3</div>

列偏移按照的是他前边的元素 如果没有 就是container的左侧边

3.列嵌套

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">col-md-2</div>
        <div class="col-md-10">
            <div class="row">
                <div class="col-md-4">1</div>
                <div class="col-md-4">2</div>
                <div class="col-md-4">3</div>
            </div>
        </div>
    </div>
</div>

4.列顺序

<div class="row">
        <div class="col-md-2 col-md-push-4">1</div>
        <div class="col-md-2 col-md-pull-2">2</div>
    </div>

类似于偏移 但是这个无视旁边的元素 可以造成重叠 注意 文档方向从左到右 pull为拉 push为推

5.清除浮动

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-6">11232q3211 adsasdsadsadsadsadsdsdadsadsadasdsadsad</div>
        <div class="col-md-3 col-sm-6 col-xs-6">2</div>
            <div class="clearfix visible-sm visible-xs"></div>
        <div class="col-md-3 col-sm-6 col-xs-6">3</div>
        <div class="col-md-3 col-sm-6 col-xs-6">4</div>
    </div>
</div>

在受到影响的前面添加一个div visible代表在什么分辨率下启用