Bootstarp基础栅格系统的使用

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

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

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

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

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

2.列偏移

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

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

3.列嵌套

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

4.列顺序

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

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

5.清除浮动

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

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