。ジャンボトロンの背景がページ全体を覆っています

Question

私のジャンボトロンコンテナがページ全体を覆っている理由を理解できません。私はジャンボトロンを "あなたの大学を見つける"の直前に止めようとしています。

第2に、ジャンボトロンの中央に検索バーを移動することにも問題があります。誰も助けることができますか？私は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以下のすべてを移動してください。

入力を集中させるために、ブートストラップはcol-xx-offset-#という概念を提供しています。

Here's a Fiddle説明のためにコードが更新されています。

いくつかの追加のメモとポインタ：

1. padding: 10;が無効CSS（おそらく単なるタイプミス）です。それがあなたの意図だった場合はpxを必ず含めてください。

2. 独自の.centerクラスを作成する必要はありません。ブートストラップには、この目的のために.text-centerクラスが付属しています。