如何将下拉表单上的标签从顶部移动到侧面

Question

我有一个简单的下拉表单的选项。在下拉菜单的顶部有一个标签，用来区分下拉菜单所指的是什么。

我想知道是否有一种方法可以将标题从下拉菜单上方移动到下拉菜单的左侧。

function DropdownForm(props: Props) {
const { choices, label, onChange } = props;
return (
<Form>
<Form.Group>
<Form.Label>{label}</Form.Label>
<Form.Control as="select" onChange={onChange}>
{choices.map((choice) => (
<option key={choice}>{choice}</option>
))}
</Form.Control>
</Form.Group>
</Form>
);
}

我想移动"Test"下拉菜单

左边的标签

Answer 1

试试这个:

function DropdownForm(props: Props) {
const { choices, label, onChange } = props;
return (
<Form>
<Form.Group as={Row} className="mb-3" controlId="formPlaintextEmail">
<Form.Label column sm="2">
{label}
</Form.Label>
<Col sm="10">
<Form.Control as="select" onChange={onChange}>
{choices.map((choice) => (
<option key={choice}>{choice}</option>
))}
</Form.Control>
</Col>
</Form.Group>
</Form>
);
}