ReactJS 的样式问题

Question

我的网页样式有问题。我使用create-react-app repo 作为我的反应样板和react-bootstrap repo 作为我的反应引导程序。

每当我在我的页面中使用<p></p> 时，它都会为我将文本居中，并且我在我的代码中找不到任何具有这种段落样式的父 div。这是页面的代码。

class App extends Component {
    render() {
        return (
            <div>
                <div className="container">
                    <div className="col-lg-12">
                        <div className="col-lg-5">
                            <img className="img-responsive img-circle" src="http://placehold.it/120x120" alt=""/><br />
                            <h3 className="lead text-justify text-white">
                                Gulshan Jubaed Prince<br />
                                <span>Partner, Techynaf</span>
                            </h3>
                            <p>Test paragraph.</p>
                        </div>
                        <div className="col-lg-7"></div>
                        <div className="col-lg-3">
                            <div className="well"></div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

这是网络浏览器上的输出。我在样式表中添加了框边框以进行调试。

.container - 白框

h3 - 黄色框

h3 跨度 - 绿框

h3 + p - 红框

请注意，即使.container 包含<p></p> 标记，该段落（用红色边框括起来）也会显示在.container div（用白框括起来）之外。

这是框边框的样式（可能对问题并不重要）：

h3 span{
    font-size: 17px;
    font-weight:lighter;
    color: #CCC;
    font-style: italic;
    border: 1px solid green;
}
.container{
    border: 2px solid white;
}
h3 {
    border: 1px solid yellow;
}
h3 + p {
    border: 1px solid red;
}

我希望 Test Paragraph 位于 .container div 内，并位于文本 Parter Techynaf 的正下方

Answer 1

请包含

clear:both;
float:left;

在你的 CSS 中

Answer 2

请试试这个：

.container{
    overflow:hidden;
}