使用 React Bootstrap，如何在同一行内对齐表单元素？

Question

所以，你看到标题、文本框和按钮是如何相互偏移的，看起来真的很乱吗？我怎样才能让他们排在一起？如果有意义的话，我特别希望按钮能够将自己“锚定”到该组件的底部。

我已经尝试了一些东西。我找到了一个讨论卡片和卡片组以及如何将卡片的所有按钮彼此对齐的线程，但是，他们建议的 none 样式选项适用于我当前的情况。

代码明智，这是所有这些都包含在其中的组件

import { Button, Row, Col, Container, Form } from "react-bootstrap"
import styles from "../styles/ParameterList.module.scss"
import {useState} from 'react'

const ParameterList = ({onRandomList, onNewList, onClear, onDupesCheck, dupesChecked}) => {
    
    const [newListState, setNewListState] = useState('')
    const [minNumberState, setMinNumberState] = useState('')
    const [maxNumberState, setMaxNumberState] = useState('')
    
    return (
        <div className={styles.container} id="paramsDiv">
            <Container fluid >
                <Row>
                    <Col align="center">
                        <Form>
                            <Form.Label>Generate an entirely new list of instruments</Form.Label>
                            <Form.Control className={styles.formControlOverride} type="number" placeholder="Minimum" min="0" value={minNumberState} onChange={(e) => setMinNumberState(e.target.value)}/>
                            <Form.Control className={styles.formControlOverride} type="number" placeholder="Maximum" min="0" value={maxNumberState} onChange={(e) => setMaxNumberState(e.target.value)}/>
                            <Button className='align-self-end' type="button" onClick={() => {onRandomList(minNumberState, maxNumberState); setMaxNumberState(''); setMinNumberState('')}}>Generate Random List</Button>
                        </Form>
                    </Col>
                    <Col align="center">
                        <Form>
                            <Form.Label>Add a random group of new instruments</Form.Label>
                            <Form.Control className={styles.formControlOverride} type="number" placeholder="Amount of Instruments" min="0" value={newListState} onChange={(e) => setNewListState(e.target.value)}/>
                            <Button className='align-self-end' type="button" onClick={() => {onNewList(newListState); setNewListState('')}}>Generate Random Instrument(s)</Button>
                        </Form>
                    </Col>

                    <Col align="center">
                        <Form>
                            <Form.Label>Choose an instrument to add to the list</Form.Label>
                            <Button>Select Instrument</Button>
                        </Form>
                    </Col>
                </Row>
            </Container>
        </div>
    )
}


export default ParameterList

这是附带的 scss

.container {
    background-color: #fff;
    padding: 1.5rem;
    margin: 1rem 10rem;
    align-items: center;
    border-radius: .5rem;
}

.formControlOverride {
    margin: .5rem
}

.formCheckOverride {
    margin-bottom: .5rem;
}

提前感谢您的帮助！

Answer 1

为此我使用了几种不同的方法：

将标签放在单独的行中，以便输入在下一行中处于同一级别。不过，如果您使用 full-width 移动设备，这会变得很奇怪。
使用样式 class 在适合您的情况的标签上设置 min-height。当然，固定高度从来都不是理想的，因为在某些情况下它们会浪费 space。
将标签的溢出设置为 ellipsis，这样它们就不会换行，然后将标题（悬停工具提示）与全文放在一起。这是否可行取决于您的最终用户场景。
只需重组即可为每个 label/input 对增加宽度。这可能是我最常用的解决方案。
重新考虑您的标签文本。 “完全”和“新”是多余的吗？调查说是的。写得好就my bible

Answer 2

您可以将设置表单设置为弹性列，前提是列的高度相同。如果下面的方法不起作用，那么您需要检查列并对行应用拉伸。

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

使用 React Bootstrap，如何在同一行内对齐表单元素？

Using React Bootstrap, how can i align the elements of forms within the same row?

css

reactjs

react-bootstrap

bootstrap-4