Styling Probleme mit ReactJS

Question

Ich habe Probleme mit dem Styling meiner Webseite. Ich verwende create-react-app Repo für meine Reaktion BoilerPlate und react-bootstrap Repo für meine Reaktion Bootstrap.

Immer wenn ich eine <p></p> in meiner Seite verwende, zentriert es den Text für mich und ich finde kein Eltern-Div, das diese Art von Styling für den Absatz in meinem Code hat. Hier ist der Code für die Seite.

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> 
     ); 
    } 

Und hier ist die Ausgabe über den Webbrowser. Ich habe Rahmenrahmen in meinem Stylesheet für Debugging-Zwecke hinzugefügt.

.Behälter - white box

h3 - gelbe Box

h3 Spannweite - green box

h3 + p - red box

Beachten Sie, dass der Absatz (in roter Umrandung) außerhalb des .container div (mit weißem Feld eingeschlossen) angezeigt wird, obwohl der .container die <p></p> Tags enthält.

Und hier ist das Styling für die Box Grenzen (vielleicht nicht für die Frage von Bedeutung sein):

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; 
} 

Ich mag die Test Paragraph innerhalb des .container div sein und direkt unter dem Text Parter Techynaf

Answer 1

Bitte umfassen

clear:both; 
float:left; 

in Ihrem css

Answer 2

Bitte versuchen Sie dies:

.container{ 
    overflow:hidden; 
}