Проблемы со стилем в ReactJS

У меня проблемы со стилем моей веб-страницы. Я использую репозиторий create-react-app для моего шаблона реакции и 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>
        );
    }

А вот вывод в веб-браузере. Я добавил границы в свою таблицу стилей для целей отладки.

.container – белое поле

h3 - желтый прямоугольник

h3 span – зеленая рамка

h3 + p - красный прямоугольник

вывод в браузере

Обратите внимание, что абзац (обведенный красной рамкой) отображается за пределами блока .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 был внутри div .container и прямо под текстом Parter Techynaf


person Tayab Soomro    schedule 13.10.2016    source источник
comment
Я подключил ваш код к codepen, и он работает как надо. Не могли бы вы указать, где отображается компонент реакции, и html вокруг него?   -  person Eric G    schedule 14.10.2016


Ответы (2)


Пожалуйста, укажите

clear:both;
float:left;

в вашем css

person Ashraf kamal siddiqui    schedule 14.10.2016

Пожалуйста, попробуйте это:

.container{
    overflow:hidden;
}
person Harapriya sahoo    schedule 14.10.2016
comment
это может перейти в раздел комментариев - person Narendra Baratam; 14.10.2016