尤其在写一些新增修改页面的时候，不好好排版的话，看起来很不美观。
博主原本的代码
<div class="form-group"> <label for="code">编号</label> <input type="text" class="form-control" placeholder="不好看" maxlength="5" id="a"></div><div class="form-group"> <label for="code">名字</label> <input type="text" class="form-control" placeholder="" id="b"></div><div class="form-group"> <label for="code">地址</label> <input type="text" class="form-control" placeholder="" id="c"></div><div class="form-group"> <label for="code">所属</label> <input type="text" class="form-control" placeholder="" id="d"></div><div class="form-group"> <label for="code">编号</label> <input type="text" class="form-control" placeholder="" id="e"></div><div class="form-group"> <label for="code">编号</label> <input type="text" class="form-control" placeholder="" id="f"></div>效果图
这里只是输入一些编号名字之类的数据，然而text框过长，且行与行紧挨，看上去并不美观。
调整两个div间的高度 <div style="margin:10px 0"></div>在div中添加margin即可,10px数值越大高度越大。
栅格系统栅格系统需要引用bootstrap插件
<script src="~/Scripts/BootStrap/bootstrap.js"></script><link rel="external nofollow" href="~/Content/BootStrap/bootstrap.css" rel="stylesheet" />栅格系统使页面内容随页面大小改变，将页面一行分为最多十二块
col-lg- 大屏
col-md- 中屏
col-sm- 小屏
后面数字是多少，就是占了多少份
这里就用到了上面的栅格系统
部分代码如下
<div class="col-sm-12 col-md-6 col-lg-6"> <label for="level">编号</label> <input type="text" class="form-control" placeholder="误以时间长短自遂" maxlength="5" id="a"></div><div class="col-sm-12 col-md-6 col-lg-6"> <label for="level">名称</label> <input type="text" class="form-control" placeholder="得失只在一席话儡" id="b"></div><div class="col-sm-12 col-md-6 col-lg-6" style="margin:15px 0"> <label for="level">aaa</label> <input type="text" class="form-control" id="c"></div><div class="col-sm-12 col-md-6 col-lg-6" style="margin:15px 0"> <label for="level">bb</label> <input type="text" class="form-control" id="d"></div><div class="col-sm-12 col-md-6 col-lg-6" style="margin:10px 0"> <label for="level">所属</label> <select class="form-control" id="e"></select></div>效果图
因为col-lg-6，所以大屏是一行两个
当col-lg-6窗口缩小为小屏时，页面显示一行一个
使用placeholder=“”，可以在该text中添加默认背景提示字以上(:з」∠)