Bootstrap横向表单

---

主要内容

1. 在form上应用.form-horizontal

   
   

2.使用栅格系统

3.实际操作

---

操作

1、新建一个demo03.html，接着再打开demo03.html，将移动设备优和css文件先导入到头文件（粘贴过来就行了），保存一下。

<metaname="viewport"

//移动设备优

content="width=device-width,initial-scale=1, user-scalable=no”>

<title>demo01></title>

//css文件

<link rel="stylesheet" href="css/bootstrap.min.css"/>

2、定义一个div，我们先做两个表单项。

<div class="container">

<form class="form-horizontal" role="from">

<div class="form-group">

<label>用户名:</label>

<input type="text" />

</div>

<div class="form-group">

<label 密码:</label>

<input type="password" />

</div>

3、运行效果

3.4结合栅格系统进行修改，在label上加一个样式，input要放在div里面。相当于form-group占一行，用户名的label标签占两格，这个文本框我们可以设成form-control，因为form-control可以占满整个容器。

<form class="form-horizontal" role="from">

//在表单上设置.form-horizontal这个样式

<div class="form-group">

//我们把form-group当成一行

<label class=" col-sm-2 ">用户名:</label>

//用栅格系统我们可以指定label占多少列

<div class="col-sm-8">

<input type="text" class="form-control"/>

(注意：要给一个control-label，让里面的input占满全屏。)

</div>

</div>

5、运行效果

这里有一个问题，就是当它小于这个768的分辨率时，就变成这样排列了。所以横向排列只适合在大于768的分辨率时候使用。

6、同时，我们发现这还有个 问题就是用户名和文本框之间有一个间距，我们可以在这个地方给一个control-label来调整间距。

<label class=" col-sm-2 control-label">用户名:</label>

7、运行效果，它可以自适应。

8、横向表单第一步是在表单上设置.form-horizontal这个样式，我们把form-group当成一行，现在我们要用栅格系统我们可以指定label占多少列，注意：要给一个control-label。接下来，增加一个div让这个div占栅格的几格，让里面的input占满全屏。我们可以在bootstrap.css中查找一下form-horizontal可以发现它只做了一些边距的设置等。

9、同样的我们可以设置密码的这个label，原理和上面讲的一样。

<div class="form-group">

<label class="control-label col-sm-2">密码:</label>

<div class="col-sm-8">

<input type="password"  class="form-control"/>

</div>

</div>

10、运行效果

当分辨率小于768px，就变成纵向排列了。