Question

我有一个reactJS应用程序，其中在视图顶部显示一个标题，然后在标题下显示一些文本。我正在使用此代码生成视图：

render() {
    return (
    <div>   
    <div className="container">
        <div className="enrollment_heading_background">
            <div className="row">
                <div className="col-12 text-center">
                    <label>Online Enrollment</label>
                </div>
            </div>
        </div>
    </div>
    <div className="container">
        <div className="enrollment_background">
            <div className="row">
                <div className="col-12 text-center text_15">
                    <label>Participant Agreement for OnLine Enrollment</label>
                </div>
            </div>
         </div>
    </div>
    </div>
    )
}

在样式表中有以下内容：

.enrollment_heading_background {
   background-color: #b3ccff;
   padding-top: 5px;
   padding-left: 0px;
   padding-right: 0px;
 }
.enrollment_background {    
   background-color: #ffe6b3;
   padding-top: 5px;
   padding-bottom: 5px;
   padding-left: 5px;
   padding-right: 5px;
}

这是视图中显示的内容：

如果您注意到，左右两侧都有空白。我无法获得标题的蓝色背景来占据整个视图，而我却无法获得米色背景来占据整个视图。

任何建议将不胜感激。

Answer 1

尝试：

<div className="enrollment_heading_background">
    <div className="container">
        <div className="row">
            <div className="col-12 text-center">
                <label>Online Enrollment</label>
            </div>
        </div>
    </div>
</div>

<div className="enrollment_background">
    <div className="container">
        <div className="row">
            <div className="col-12 text-center text_15">
                <label>Participant Agreement for OnLine Enrollment</label>
            </div>
        </div>
    </div>
</div>

容器中的填充物导致空白。您仍然可以保留容器填充，但是将背景div移出，以便它们包裹两个容器并保持其100％宽度。

ReactJS容器不会占用整行

1 个答案: