代码之家 › 专栏 › 技术社区 › TomR

如何在React中将两个标签输入(或datepicker)集水平放置在一行中?

bootstrap-4 datepicker twitter-bootstrap reactjs

TomR · 技术社区 · 6 年前

我有两个表单的标签输入标签输入集,我想将其放在一行中(例如,这可以是一个小表单,用于输入某些报表的开始和结束日期)我正在使用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 datepicker替换输入时 https://www.npmjs.com/package/react-datepicker 情况变得更糟了——没有什么比这更糟了。

在同一行中,我应该应用哪些样式来订购标签输入/日期选择器组件?我不是第一个寻求这样答案的人,这是反应世界中如此奇怪的要求吗?

我还补充说

"reactstrap": "^6.1.0"

我的项目。

1 回复 | 直到 6 年前

AzaDee 6 年前

要使用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 是一个非常方便的资源时,试图找出布局配置与引导。