Question

我为2种表格设置了label-input-label-input，我希望将其放入一行（例如，对于输入某些报告的开始日期和结束日期，这可能是一个小表格）。我正在使用React 16和Bootstrap4。

我已经找到了代码：

 <div className="container-fluid">
    <div className="row">
        <div className="col-lg-12">
            <form className="form-horizontal">
                <div className="form-group">
                    <label htmlFor="test1" className="col-xs-1">From</label>
                    <input
                        disabled
                        type="text"
                        id="test1"
                        className="col-xs-3"
                        />
                    <label htmlFor="test2" className="col-xs-1">To</label>
                    <input
                        disabled
                        type="text"
                        id="test2"
                        className="col-xs-3"
                        />
                </div>
            </form>
        </div>
    </div>

但是我不确定这是正确的解决方案，因为标签和输入之间没有填充/边距。当我用React-datepicker https://www.npmjs.com/package/react-datepicker替换输入时，情况变得更糟-一行都没了。

在同一行中订购lable-input / datepicker组件应采用什么样式？我不是第一个寻求这种答案的人，这是React世界中如此奇怪的要求吗？

我还添加了

"reactstrap": "^6.1.0"

到我的项目。

Answer 1

要使用col-xs-1类名称，您需要将它们放在类“ row”的父div中

<div className="container-fluid">
    <div className="row">
        <div className="col-lg-12">
            <form className="form-horizontal">
                <div className="form-group row">
                    <label htmlFor="test1" className="col-xs-1">From</label>
                    <input
                        disabled
                        type="text"
                        id="test1"
                        className="col-xs-3"
                        />
                    <label htmlFor="test2" className="col-xs-1">To</label>
                    <input
                        disabled
                        type="text"
                        id="test2"
                        className="col-xs-3"
                        />
                </div>
            </form>
        </div>
    </div>
</div>

对于元素左右两侧的边距，您也可以使用类mx-（1-5）

<label htmlFor="test1" className="col-xs-1">From</label>
<input
    disabled
    type="text"
    id="test1"
    className="col-xs-3 mx-1"
    />

This是非常有用的资源，用于尝试使用引导程序找出布局配置。

如何在React中将2个标签输入（或日期选择器）集水平放置在一行中？

1 个答案: