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

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/label 组在同一行上彼此相邻。

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

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

How to make form inline labels not inline?

html

css

forms

twitter-bootstrap

react-bootstrap