Bootstrap Jumbotron格式問題

我試圖在jumbotron中放置圖像和兩行文本。下面的代碼產生接近期望的結果：Bootstrap Jumbotron格式問題

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

我與我的左邊像一個可愛的小的超大屏幕和右側的兩個文本項目。但是，當我將第二個段落標記放在第一個div的第一個段落以使兩個段落正確排列時，jumbotron摺疊成圖像和文本段落上方的細線。

我試過刪除圖像和所有的內聯格式。除了從div內刪除第二段元素外，沒有任何東西可以工作。

我希望你能提供任何幫助。

謝謝！

來源

2017-04-14 Kevin

你缺少一個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>

演示http://www.bootply.com/Vhw5rffz8D

來源

2017-04-14 22:48:04

謝謝！這工作完美。 – Kevin

添加clearfix格後兩個街區神韻：。在你的例子中，在關閉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>

來源

2017-04-14 22:48:58

Bootstrap Jumbotron格式問題

回答

相關問題