2016-10-13 4 views
0

У меня возникли проблемы с дизайном моей веб-страницы. Я использую 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 + р - красный квадрат

output on browser

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

+0

я включил свой код в codepen, и она работает как положено. Не могли бы вы включить туда, где будет реагировать компонент реагирования, и html? –

ответ

0

Пожалуйста включают

clear:both; 
float:left; 

в вашем CSS

0

Пожалуйста, попробуйте следующее:

.container{ 
    overflow:hidden; 
} 
+0

это может пойти в раздел комментариев –

Смежные вопросы