ブートストラップジャンボトロンのフォーマット問題

Question

ジャンボトロンにイメージと2行のテキストを配置しようとしています。私は、左右に2つのテキスト項目の私のイメージとちょっといいジャンボトロンを取得

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

：次のコードは、所望の結果に近く作り出します。しかし、2番目の段落タグをdiv内に配置して2番目の段落を適切に整列させると、ジャンボトロンはイメージとテキスト段落の上の細い線に崩壊します。

イメージとすべてのインラインフォーマットを削除しようとしました。 div内から2番目の段落要素を削除する以外は何も動作しません。

ご提供いただけるお役に立てれば幸いです。

ありがとうございます！

Answer 1

あなたがcontainer要素が欠落しています

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

デモ2つのブロックがalligned後http://www.bootply.com/Vhw5rffz8D

Answer 2

がclearfix div要素を追加します。あなたの例では、Jumbotronのdivを閉じる直前です。次に例を示します。

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