.jumbotron背景覆盖整个页面

Question

我无法弄清楚为什么我的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类。