Browse Source

fix: fix Browser compatibility for .ant-form-inline.

pull/162/head
SimaQ 9 years ago
parent
commit
b99dffbd09
  1. 2
      components/form/demo/inline-form.md
  2. 2
      components/form/index.md
  3. 32
      style/components/form.less
  4. 2
      style/mixins/form.less

2
components/form/demo/inline-form.md

@ -2,7 +2,7 @@
- order: 1
在**视口宽度大于等于 768px **时,你可以为 `<form>` 标签添加 `.ant-form-inline` 类可使其表现为 inline-block 级别的控件。
你可以为 `<form>` 标签添加 `.ant-form-inline` 类可使其表现为 inline-block 级别的控件。
---

2
components/form/index.md

@ -16,8 +16,6 @@
- 水平排列:`.ant-form-horizontal` 类可以实现 `label` 标签和表单控件的水平排列;
- 行内排列:`.ant-form-inline` 类可使其表现为 inline-block 级别的控件。
**注**: `.ant-form-inline` 类只适用于**视口宽度大于等于 768px **的情形。
### 表单域
表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等。

32
style/components/form.less

@ -219,28 +219,24 @@ form {
}
//== Inline Form
// Attention: Inline form does only apply to within viewports that are at least 768px wide
// TODO: 优化
.@{css-prefix}form-inline {
@media (min-width: @screen-sm-min) {
.@{css-prefix}form-item {
display: inline-block;
margin-right: 10px;
}
.@{css-prefix}form-item {
display: inline-block;
margin-right: 10px;
}
.@{css-prefix}input {
display: inline-block;
width: auto;
vertical-align: middle;
}
.@{css-prefix}input {
display: inline-block;
width: auto;
vertical-align: middle;
}
.@{css-prefix}form-text {
display: inline-block;
}
.@{css-prefix}form-text {
display: inline-block;
}
.has-feedback {
display: inline-block;
}
.has-feedback {
display: inline-block;
}
}

2
style/mixins/form.less

@ -51,9 +51,7 @@
}
label {
display: inline-block;
font-size: @font-size-base;
max-width: 100%;
}
input[type="search"] {

Loading…
Cancel
Save