html - 如何使表单内联标签不内联？

Question

我使用了一个与 React Bootstrap 内联的表单因为我希望我所有的领域都在一条线上。我没有意识到的是，我不希望我的标签也像这样在同一行上:

我希望我的文本字段以这种方式显示，但我希望我的标签位于文本字段的顶部...例如:

有什么办法可以做到吗？我试过 <ControlLabel></ControlLabel> ，但当然这只是一个内联标签。

这是我的代码片段:

<Form inline className="margin-bottom-5">\
        <ControlLabel>Company</ControlLabel> <!-- Doesn't work -->
        <FormControl
          type='text'
          placeholder='Company'

        />
        {' '}
        <ControlLabel>Title</ControlLabel> <!-- Doesn't work -->
        <FormControl
          type='text'
          placeholder='Title'
        />
        {' '}
        <ControlLabel>Start Month</ControlLabel> <!-- Doesn't work -->
        <FormGroup>
          <Select
              className="dropDownWidth"
              placeholder='Start Month'
              options={select_options['Months']}
        {' '}
       </FormGroup>
</Form>

还有其他方法可以实现吗？我是 CSS 的新手，所以不确定还能尝试什么。任何帮助将不胜感激，谢谢!!

Answer 1

您需要将对象设为 block element .

form label {
   display: block;
}