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

我为2个表格设置了标签输入，我想将其放在一行中，例如，这可以是一个小表格，用于输入某些报告的开始和结束日期。我使用的是React 16和Bootstrap 4

我已经找到了密码：

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

---

到我的项目。

要使用col-xs-1类名，需要将它们放在类行的父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"
    />

在尝试使用引导程序确定布局配置时，这是一个非常方便的资源

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