css - react-bootstrap 表单边距导致溢出

Question

我今天刚刚进入 react-bootstrap。我希望表单位于左右两侧有边距的 div 中。我的 jsx 看起来像这样：

const Settings = () =>{
   return(
            <div className="content">
                <div className="box">

                    {/* Actual form with course info */}
                    <Form className="course-info">
                        <Form.Group as={Row} controlId="formHorizontalEmail">
                            <Form.Label variant="settingsLabel" column sm={3}>
                                Course Title
                            </Form.Label>
                            <Col sm={5}>
                                <Form.Control/>
                            </Col>
                        </Form.Group>
                    </Form>

                </div>
           </div>
   );
}

CSS：

/* A big wrapper for everything on this page */
.content{
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The box containing the class settings */
.box {
    width: 600px;
    height: 600px;
    border: 30px solid #A6D1DF;
    margin-top:50px;
}

.center-items{
    margin-top: 1em;
    text-align: center;
}

/* Gives the form left/right margin and sets text color */
.course-info {
    padding-left: 20px;
    color: #9E7772;
}

Form.Label-settingsLabel {
    font-size: 1em;
    color: red;
}

并且表单内容溢出框的右侧，删除边距可以解决问题。但是，我仍然希望该边距用于样式目的。有什么建议么？谢谢

标签： cssreactjsreact-bootstrap