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

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;
}

Answer 2

我同意评论者的意见，在您的标签上添加display: block;。但是我会添加另一个东西，我会将每组表格和标签放在一个div中，然后将它们向左浮动，这样它们就会叠加起来。这样，您可以将每个表单/标签组保持在同一行的旁边。

<Form inline className="margin-bottom-5">
<div class = "some-other-class">
    <label class ="some-class"> Company </label> 
    <FormControl
      type='text'
      placeholder='Company'

    />
</div>
    {' '}
<div class = "some-other-class">
    <label>Title</label> 
    <FormControl
      type='text'
      placeholder='Title'
    />
</div>

CSS

.some-class{
display: block;
}

.some-other-class{
float: left;
}