bootstrap grid用法-木庄网络博客

本文摘自PHP中文网，作者藏色散人，侵删。

bootstrap grid的用法：首先使用container来包裹div；然后在div里面设置行；接着设置列能够快速对这个框架进行搭建；最后通过拖拽浏览器来改变宽窄即可。

本文操作环境：Windows7系统、bootstrap3、Dell G3电脑。

bootstrap的grid怎么使用？

div使用container来包裹，然后在里面设置行，设置行后再设置列能够快速对这个框架进行搭建

<div class="container">
            <h1>Hello, world!</h1>
          
            <div class="row">
                <div class="col-md-1"  style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                    第一列占1个md
                    </p>
                </div>
          
                <div class="col-md-2" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        这个是第二列 占 2 个md
                    </p>
                </div>
                <div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p>最后一个md占9个列
                        </p>
                </div>
            </div>
        </div>