两个div在同一行显示 调整两个div间的高度 栅格系统col-sm md lg

尤其在写一些新增修改页面的时候，不好好排版的话，看起来很不美观。

博主原本的代码

<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 href="~/Content/BootStrap/bootstrap.css" rel="stylesheet" />

栅格系统使页面内容随页面大小改变，将页面一行分为最多十二块

col-lg- 大屏

col-md- 中屏

col-sm- 小屏

后面数字是多少，就是占了多少份

两个div在同一行显示

这里就用到了上面的栅格系统

部分代码如下

<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">
9971
<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中添加默认背景提示字

以上(:з」∠)