bootstrap布局之栅格系统----七列等分

前提：一定不要忘记导入bootstrap包，两个jq和一个css

好了，进入正题哦！

css样式：

        .my-col {

            /* width: 14.27%; */

            width: 14.2857%;

            margin-top: 20px;

        }

        .box {

            width: 100%;

            height: 300px;

            background-color: #a4a4a4;

        }

html结构：

<div class="container-fluid">

        <div class="row">         

            <div class="col-xs-1 my-col">

                <div class="box"></div>

            </div>

            <div class="col-xs-1 my-col">

                <div class="box"></div>

            </div>

            <div class="col-xs-1 my-col">

                <div class="box"></div>

            </div>

            <div class="col-xs-1 my-col">

                <div class="box"></div>

            </div>

            <div class="col-xs-1 my-col">

                <div class="box"></div>

            </div>

            <div class="col-xs-1 my-col">

                <div class="box"></div>

            </div>

            <div class="col-xs-1 my-col">

                <div class="box"></div>

            </div>

        </div>

    </div>

注意点：

              前面不用累加 col-lg-1 col-md-1 col-sm-1 , 用xs所有屏幕都生效 ： 原因是bootstrap源码里面有媒体查询