div不会一直水平扩展

Question

为什么我的div的左右两边都有空格？

​

​

render() {
    return (
        <div className="container intro-body">
            <div className="row">
                <h2 className="intro-name center-block">TEXT</h2>
            </div>
        </div>
    )
}

在我的css中

.intro-body {
    height: 500px;
    background-color: #3BC5C3;
}

我曾尝试将body设置为margin: 0和padding: 0，认为这与Bootstrap的默认值有关，但不起作用。我也没有容器，为什么它还有填充呢？

Answer 1

问题是“容器”类- Bootstrap也应用了这个的样式-使用"container-fluid“来获得全宽度。

render() {
    return (
        <div className="container-fluid intro-body">
            <div className="row ">
                <h2 className="intro-name center-block">TEXT</h2>
            </div>
        </div>
    )
}