Add form layout demo and fix vertical form style

components/form/demo/layout.md

@@ -0,0 +1,75 @@
+---
+order: 13
+title:
+  zh-CN: 表单布局
+  en-US: Form Layout
+---
+
+## zh-CN
+
+表单有三种布局。
+
+## en-US
+
+There are three layout for form: `horizontal`, `vertical`, `inline`.
+
+````jsx
+import { Form, Input, Button, Radio } from 'antd';
+const FormItem = Form.Item;
+
+class FormLayoutDemo extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      formLayout: 'horizontal',
+    };
+  }
+  handleFormLayoutChange = (e) => {
+    this.setState({ formLayout: e.target.value });
+  }
+  render() {
+    const { formLayout } = this.state;
+    const formItemLayout = formLayout === 'horizontal' ? {
+      labelCol: { span: 4 },
+      wrapperCol: { span: 14 },
+    } : null;
+    const buttonItemLayout = formLayout === 'horizontal' ? {
+      wrapperCol: { span: 14, offset: 4 },
+    } : null;
+    const layoutProps = { [formLayout]: true };
+    return (
+      <div>
+        <Form {...layoutProps}>
+          <FormItem
+            label="Form Layout"
+            {...formItemLayout}
+          >
+            <Radio.Group defaultValue="horizontal" onChange={this.handleFormLayoutChange}>
+              <Radio.Button value="horizontal">Horizontal</Radio.Button>
+              <Radio.Button value="vertical">Vertical</Radio.Button>
+              <Radio.Button value="inline">Inline</Radio.Button>
+            </Radio.Group>
+          </FormItem>
+          <FormItem
+            label="Field A"
+            {...formItemLayout}
+          >
+            <Input placeholder="input placeholder" />
+          </FormItem>
+          <FormItem
+            label="Field B"
+            {...formItemLayout}
+          >
+            <Input placeholder="input placeholder" />
+          </FormItem>
+          <FormItem {...buttonItemLayout}>
+            <Button type="primary" size="large">Submit</Button>
+          </FormItem>
+        </Form>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<FormLayoutDemo />, mountNode);
+````

components/form/index.en-US.md

@@ -12,7 +12,8 @@ Form is used to collect, validate, and submit the user input, usually contains v
 You can align the controls of a `form` using one of the following attributes：
 
 - `horizontal`：to horizontally align the `label`s and controls of the fields.
-- `inline`：to render the labels and controls of the fields in one line (by setting the display property of form controls to `inline-block`).
+- `vertical`：to vertically align the `label`s and controls of the fields.
+- `inline`：to render form fields in one line.
 
 ## Form fields
 

components/form/index.zh-CN.md

@@ -12,8 +12,9 @@ title: Form
 
 我们为 `form` 提供了以下两种排列方式：
 
-- 水平排列：可以实现 `label` 标签和表单控件的水平排列；
-- 行内排列：使其表现为 `inline-block` 级别的控件。
+- 水平排列：标签和表单控件水平排列；
+- 水质排列：标签和表单控件上下垂直排列；
+- 行内排列：表单项水平行内排列。
 
 ## 表单域
 

components/form/style/index.less

@@ -253,6 +253,8 @@ form {
 .@{form-prefix-cls}-vertical {
   .@{form-prefix-cls}-item-label {
     padding: 0 0 8px;
+    display: block;
+    text-align: left;
 
     label:after {
       content: '';