html - .jumbotron 背景覆盖整个页面

Question

我无法弄清楚为什么我的超大屏幕容器会覆盖整个页面。我正试图让超大屏幕在“找到你的大学”之前停下来。

其次，我也无法将搜索栏移动到超大屏幕的中间。谁能帮忙？我是 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 类。