Bootstrap Jumbotron Formatierung Problem

Question

Ich versuche, ein Bild und zwei Zeilen Text in einem Jumbotron zu platzieren. Der folgende Code erzeugt in der Nähe zu dem gewünschten Ergebnis:

 <div class="jumbotron" id="jumbo"> 
      <div class="col-md-1"> 
       <img src="images/ps_logo.png" style="width: 220px; height: 140px"> 
      </div> 
      <div class="col-md-9 col-md-offset-2"> 
       <p style="font-size:380%; font-weight: bold; padding-top:10px">Picante Solutions, LLC</p> 
      </div> 
      <p style="font-style:italic; font-weight: bold; font-size:150%">Professional Technology Services for Business and Home</p> 
     </div> 

ich auf der linken Seite eine nette kleine jumbotron mit meinem Bild zu erhalten, und die beiden Textelemente auf dem rechten Seite. Wenn ich jedoch das zweite Absatz-Tag innerhalb des div mit dem ersten platziere, um die zwei Absätze richtig auszurichten, kollabiert der Jumbotron zu einer dünnen Linie über den Bild- und Text-Absätzen.

Ich habe versucht, das Bild und alle Inline-Formatierung zu entfernen. Nichts scheint zu funktionieren, außer das zweite Absatzelement aus dem div zu entfernen.

Ich würde jede mögliche Hilfe schätzen, die Sie zur Verfügung stellen konnten.

Danke!

Answer 1

Sie vermissen ein container Element:

<div class="jumbotron" id="jumbo"> 
    <div class="container"> 
    <div class="col-md-1"> 
     <img src="images/ps_logo.png" style="width: 220px; height: 140px"> 
    </div> 
    <div class="col-md-9 col-md-offset-2"> 
     <p style="font-size:380%; font-weight: bold; padding-top:10px">Picante Solutions, LLC</p> 
     <p style="font-style:italic; font-weight: bold; font-size:150%">Professional Technology Services for Business and Home</p> 
    </div> 
    </div> 
</div> 

Demo http://www.bootply.com/Vhw5rffz8D

Answer 2

clearfix div hinzufügen nach zwei Blöcke alligned. In Ihrem Beispiel kurz vor dem Schließen von div von Jumbotron. Hier ist das Beispiel:

<div class="jumbotron" id="jumbo"> 
<div class="col-md-1"> 
    <img src="images/ps_logo.png" style="width: 220px; height: 140px"> 
</div> 
<div class="col-md-9 col-md-offset-2"> 
    <p style="font-size:380%; font-weight: bold; padding-top:10px">Picante Solutions, LLC</p> 
<p style="font-style:italic; font-weight: bold; font-size:150%">Professional Technology Services for Business and Home</p> 
</div> 
    <div class="clearfix"></div> 
</div>