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

Question

我使用了与React Bootstrap 内联的表单，因为我希望我的所有字段都在一行上。我没有意识到我不希望我的标签也位于同一行，例如：

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

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

这是我的代码的 sn-p：

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