[英]Styling issues with ReactJS
我的网页样式出现问题。 我正在为我的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
下方
请包括
clear:both;
float:left;
在你的CSS
请尝试以下方法:
.container{
overflow:hidden;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.