爲什麼我的引導縮略圖INSIDE我的Jumbotron？

我已經成功地在我的一個頁面上創建了一個jumbotron，並且我想在它之外有一些縮略圖和下面的jumbotron。然而，即使是一個單獨的部分，縮略圖也會以某種方式最終進入到大臂內部，從而使它變得煩人：P無論如何要解決這個問題並使大臂和縮略圖分開？爲什麼我的引導縮略圖INSIDE我的Jumbotron？

我的HTML

<div class="jumbotron"> 
    <div class="container"> 
     <h1><font color="#0095f0" face="">Blog!</font></h1> 
     <p><font color="#0095f0"><strong>Blah blah blah ect :P</strong></font></p> 
     <p><a class="btn btn-primary btn-lg" href="#" role="button">View Blogs!</a></p> 
    </div> 
    </body> 

    <body> 
    <div class="row"> 
    <div class="col-sm-6 col-md-4"> 
     <div class="thumbnail"> 
      <img src="https://image.freepik.com/free-icon/question-mark_318-52837.jpg" alt="Annas Blog"> 
      <div class="caption"> 
      <h3><font face="Calibri"><strong>The Blog!</strong></font></h3> 
      <p><small>View Blog! That's why you're here anyway... right?</small></p> 
      <p><a href="https://image.freepik.com/free-icon/question-mark_318-52837.jpg" class="btn btn-primary" role="button">Blogs!</a></p> 
      </div> 
     </div> 
     </div> 
    </div> 
    </body>

和我的CSS

 .jumbotron { 
      margin: 15px 0 30px 0; 
      background-image: url("https://image.freepik.com/free-icon/question-mark_318-52837.jpg"); 
      background-repeat: repeat; 
      background-position: 30% 90%; 
     } 

     .row { 
      margin: 0 5px; 
     }

然而，它顯示了這樣的嗎？請查看鏈接...

screen capture

請幫我解決這個問題:)

來源

2017-06-29 Jack Champion

很難說，沒有整個標籤。也許關閉這些標籤有問題。首先把它們放在一個'' – Jalil

你的HTML結構都搞砸了：有一些隨機的標籤，jumbotron

has no closing

，誰知道那裏有什麼錯誤。清理你的爛攤子，然後再試一次。 –

移除額外body標籤和密切的超大屏幕DIV正確

<div class="jumbotron"> 
    <div class="container"> 
     <h1><font color="#0095f0" face="">Blog!</font></h1> 
     <p><font color="#0095f0"><strong>Blah blah blah ect :P</strong></font></p> 
     <p><a class="btn btn-primary btn-lg" href="#" role="button">View Blogs!</a></p> 
    </div> 
</div> // Close it here 
    <div class="row"> 
    <div class="col-sm-6 col-md-4"> 
     <div class="thumbnail"> 
      <img src="https://image.freepik.com/free-icon/question-mark_318-52837.jpg" alt="Annas Blog"> 
      <div class="caption"> 
      <h3><font face="Calibri"><strong>The Blog!</strong></font></h3> 
      <p><small>View Blog! That's why you're here anyway... right?</small></p> 
      <p><a href="https://image.freepik.com/free-icon/question-mark_318-52837.jpg" class="btn btn-primary" role="button">Blogs!</a></p> 
      </div> 
     </div> 
     </div>

來源

2017-06-29 05:46:24 Bruce

從.jumbotron刪除以下屬性CSS：

background-image: url("https://image.freepik.com/free-icon/question-mark_318-52837.jpg"); 
background-repeat: repeat; 
background-position: 30% 90%;

因此它應該看起來像這樣：

.jumbotron { 
     margin: 15px 0 30px 0; 
    }

來源

2017-06-29 05:47:14

爲什麼我的引導縮略圖INSIDE我的Jumbotron？

回答

相關問題