Reactjs 引导输入长于字段集边框

我试图创建一个新表单，使用引导输入一些信息，但问题是输入比字段集的边界长

这是我的密码：

import React from 'react';

class Test extends React.Component {
    constructor(props) {
        super(props);

    }



    render() {
        return (
            <div>
                <form >
                    <fieldset className="border p-2" >
                        <legend className="w-auto" style={{ textAlign: "left" }}>Information</legend>
                        <div className="form-group row">
                            <label className="col-md-2 col-form-label label-form">Name</label>
                            <input type="text" className="col-md-10" id="" />
                        </div>
                    </fieldset>
                </form>
            </div>
        );
    }
}

export default Test;

从“React”导入React；
类测试扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
问询处
名称
);
}
}
导出默认测试；

我的问题是如何使输入缩短到它在字段集中的样子？

---

谢谢您的帮助。

看看Bootstrap的。为

col-md-10

使用一个额外的div。 正如评论中提到的。。。在输入元素上使用

表单控件

render() {
    return (
        <div>
            <form >
                <fieldset className="border p-2" >
                    <legend className="w-auto text-left">Information</legend>
                    <div className="form-group row">
                        <label htmlFor="myId" className="col-md-2 col-form-label label-form">Name</label>
                        <div className="col-md-10">
                            <input type="text" className="form-control" id="myId" />
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    );
}

---

删除

col-md-10

并在

input

中添加

form control

，输入将显示在下一行，而不是与标签的同一行。我希望标签和输入在同一行。嗨@Tim，为什么有一个额外的div和'col-md-10'而不是输入和类名称'col-md-10'？该列在网格内有额外的填充。如果将其应用于输入，则该填充用于缩进字段的文本，这不是一个好主意。将结构（网格）和组件分开是一种很好的做法。

标签

这里是一个例外，因为它作为网格项工作得更好。我会试着做一个练习来恰当地解释它。

.workaround-md-10 {
    margin-left: 1rem;
    max-width: calc(100% - 2rem);
    margin-right: 1rem;
}

@media (min-width: 992px) {
    .workaround-md-10 {
        max-width: calc(83.333333% - 2rem);
    }
}