我的网页样式有问题。我正在使用 create-react-app我的 React 样板和 react-bootstrap 的 repo 协议(protocol)用于我的 React Bootstrap 的 repo 协议(protocol)。
每当我使用 <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 span - 绿框
h3 + p - 红框
请注意,该段落(用红色边框包围)显示在 .container
之外div(用白框括起来)即使 .container
包含 <p></p>
标签。
这是框边框的样式(对于这个问题可能不重要):
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 中
关于html - ReactJS 的样式问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40031708/