.jumbotron背景覆蓋整個頁面

Question

我無法弄清楚爲什麼我的jumbotron容器覆蓋整個頁面。我正試圖在「找到你的大學」之前讓jumbotron停下來。

其次，我也遇到了將搜索欄移動到jumbotron中間的問題。誰能幫忙？我是HTML，CSS和Bootstrap的新手。

HTML：

<div class="center jumbotron"> 
    <div class="container"> 
    <h1>MOVE ABROAD WITH EASE</h1> 

    <h2>Find out about the cities, where to live and eat, hangout groups.</h2> 

    <div class="container"> 
     <div class="row"> 
     <div id="custom-search-input"> 
      <div class="input-group col-md-6"> 
      <input type="text" class=" search-query form-control" placeholder="Which city are you moving to?" /> 
      <span class="input-group-btn"> 
       <button class="btn btn-danger" type="button"> 
       <span class=" glyphicon glyphicon-search"></span> 
       </button> 
      </span> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：

.center { 
    text-align: center; 
} 
#custom-search-input { 
    margin: 0; 
    margin-top: 50px; 
    margin-bottom: 50px; 
    padding: 10; 
} 

Answer 1

你jumbotron很可能填補你的頁面，因爲你有它內部的所有內容。只需從Find Your University及其下方移除所有內容即可。

至於居中您的輸入，Bootstrap提供了col-xx-offset-#概念來幫助解決這個問題。

Here's a Fiddle與您的代碼更新說明。

一些額外的注意事項和指針：

1. padding: 10;是無效的CSS（可能只是一個錯字）。如果這是你的意圖，請確保包含px。

2. 創建自己的.center類是不必要的。 Bootstrap爲此目的帶有一個.text-center類。