ReactJS的樣式問題

Question

我的網頁樣式出現問題。 我正在為我的react樣板使用create-react-app repo和為我的react引導程序使用react-bootstrap倉庫。

每當我在頁面中使用<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>
        );
    }

這是Web瀏覽器上的輸出。 我已在樣式表中添加了框邊框以進行調試。

.container-白色盒子

h3-黃色方塊

H3跨度 -綠框

h3 + p-紅框

請注意，即使.container包含<p></p>標記，該段落（用紅色邊框包圍）仍顯示在.container div（用白色框包圍） .container 。

這是盒子邊框的樣式（對於這個問題可能並不重要）：

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;
}