FormItem colon disappers on responsive layout(grid)

[hugobarragon]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

Form items with a responsive layout like this:

const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };

Open the running page on a new window and resize until the inputs go below the labels (mobile devices)
When reduce to mobile the inputs break a line down, witch is good, but the ':' colon disappears

What is expected?

on mobile and desktop, only the layout changes, so if the colon=true it should keep the ':' on mobile

What is actually happening?

the ':' disappears

Environment	Info
antd	3.23.2
React	16.1.1
System	Windows 10
Browser	Google Chrome Version 76.0.3809.132 (Official Build) (64-bit)

---

we use antd for 2 years on internal projects

[afc163]

It is by designed, vertical layout don't have colon.

[hugobarragon]

It is by designed, vertical layout don't have colon.

1º the repo layout is 'horizontal', only the grid system|css changes it
2º where is that written at?
colon | change default props colon value of Form.Item | boolean | true

consider reopening, and if its feature update the DOCS?

[delphin92]

It is by designed, vertical layout don't have colon.

Ok, it can be default behavior. But why I can change it and force vertical form to have colons?

I can write this:

<Form
  layout="vertical"
  colon={true}
>

And this:

<Form.Item
  colon={true}
>

But no one works as expected.

Please, reopen this issue.

[delphin92]

WA:

.with-colons.ant-form-vertical .ant-form-item-label > label::after {
  &:extend(.ant-form-item-label > label::after);
  display: block;
}

<Form className="with-colons">