У меня возникли проблемы с дизайном моей веб-страницы. Я использую create-react-app репо для моего реактивного шаблона и react-bootstrap репо для моего реактивного бутстрапа.Проблемы с дизайном ReactJS
Всякий раз, когда я использую <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 + р - красный квадрат
Обратите внимание, что абзац (заключенный в красную рамку) отображается за пределами поля .container
(в комплекте с белым ящиком), хотя .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
я включил свой код в codepen, и она работает как положено. Не могли бы вы включить туда, где будет реагировать компонент реагирования, и html? –