我无法弄清楚为什么我的超大屏幕容器会覆盖整个页面。我正试图让超大屏幕在“找到你的大学”之前停下来。
其次,我也无法将搜索栏移动到超大屏幕的中间。谁能帮忙?我是 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;
}
最佳答案
您的 jumbotron
可能会填满您的页面,因为您的所有内容都在其中。只需将 Find Your University
及其下方的所有内容移出即可。
至于将输入居中,Bootstrap 提供了 col-xx-offset-#
概念来帮助实现这一点。
Here's a Fiddle更新您的代码以进行说明。
一些附加说明和指示:
padding: 10;
是无效的 css(可能只是一个拼写错误)。如果这是您的意图,请确保包含px
。创建您自己的
.center
类是不必要的。为此,Bootstrap 附带了一个.text-center
类。
关于html - .jumbotron 背景覆盖整个页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36679037/