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

Question

我有两个表单的标签输入标签输入集，我想把它们放在一行中(例如，这可以是一个小表单，用于输入某些报表的开始和结束日期(。我正在使用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>

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

我应该应用什么样式来在同一行中订购我的标签输入/日期选择器组件？我不是第一个寻求这样答案的人，这在React世界里是不是一个如此奇怪的要求？

我还添加了

"reactstrap": "^6.1.0"

我的项目。

Answer 1

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

当尝试使用引导程序来计算布局配置时，这是一个非常方便的资源。