如何将下拉表单的label标签从下拉框顶部移动至左侧

你使用的是React Bootstrap的表单组件，有两种常用方案可以实现标签移动到下拉框左侧： #

方案1：使用React Bootstrap自带的水平表单布局 #

给Form添加horizontal属性，同时用Row和Col组件拆分标签和下拉框的宽度即可，代码示例如下：

import { Form, Row, Col } from 'react-bootstrap';

function DropdownForm(props: Props) {
    const { choices, label, onChange } = props;
    return (
        <Form horizontal>
            <Form.Group as={Row}>
                <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>
    );
}

你可以调整sm="2"和sm="10"的数值适配需要的标签和下拉框宽度比例。 #

方案2：用Flex布局自定义实现 #

如果不需要适配响应式或者想要更灵活控制样式，直接给Form.Group添加flex布局样式即可：

function DropdownForm(props: Props) {
    const { choices, label, onChange } = props;
    return (
        <Form>
            <Form.Group style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
                <Form.Label style={{ marginBottom: 0, whiteSpace: 'nowrap' }}>{label}</Form.Label>
                <Form.Control as="select" onChange={onChange} style={{ flex: 1 }}>
                    {choices.map((choice) => (
                        <option key={choice}>{choice}</option>
                    ))}
                </Form.Control>
            </Form.Group>
        </Form>
    );
}

其中gap参数可以调整标签和下拉框的间距，alignItems: 'center'保证两者垂直居中对齐，flex:1设置让下拉框占满剩余宽度。

内容的提问来源于stack exchange，提问作者HangoutGuy