html - 两个部分之间不需要额外的空间 - Bootstrap 3 中的背景图像原因

Question

我是 Bootstrap 的新手。之前我是自己写一个网格，但是现在，我想，我应该学习新的东西。

我正在其中一个容器中制作一个带有背景图片的基本站点。我不知道为什么，我添加了额外的填充。我尝试使用 background-size: contain 和 cover，但这不是我想要的效果。

我需要 padding-bottom 来拉伸(stretch)容器。数学运算是图像的高度用with分割并乘以percetage。在我自己的网格中，它就像童话故事一样工作。

现在我错过了一些东西。有什么想法吗？

这是 jsfiddle:https://jsfiddle.net/LukMona/qwqck9bp/2/

CSS:

.bg-img {
  width: 100%;
  background-image: url("https://github.com/LukMona/Doctors_Search_Basic/blob/master/images/header_background.jpg?raw=true");
  background-repeat: no-repeat;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-size: 100% auto;
  padding-bottom: (1210/2808)*100%;
}
.main-top-header {
  position: absolute;
  width: 90%;
  margin-top: 2%;
  margin-left: 5%;
  margin-right: 5%;
}
.main-top-header-left {
  float: left;
  position: relative;
  width: 25%;
  margin: 0;
}
.logo {
  margin: 0;
}
h1 {
  font-size: 2.5rem;
  margin: 0;
}
.main-top-header-right {
  position: relative;
  float: right;
  width: 75%;
}
ul {
  text-align: right;
}
li {
  display: inline-block;
  margin-left: 5%;
  font-size: 2rem;
}
a:link {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: blue;
}
.main-search {
  background-color: grey;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  margin: 0 auto;
  padding-top: 2%;
  padding-bottom: 5%;
  border-radius: 3%;
  position: relative;
  ;
  top: 10rem;
}
.searching {
  width: 50%;
  margin: 0 auto;
}
.find {
  width: 80%;
  background-color: grey;
}
span:first-child {
  padding: 2%;
  margin-bottom: 2%;
}
.search {
  float: left;
}
input {
  height: 3rem;
  width: 75%;
  padding-left: 2%;
}
button {
  width: 20%;
  height: 3rem;
  background-color: blue;
  color: white;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
nav {
  background-color: grey;
  height: 200px;
}

HTML:

<header class="container-fluid bg-img">
  <div class="row">
    <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12 main-header">

      <!-- TOP HEADER -->
      <div class="main-top-header">

        <div class="main-top-header-left">
          <div class="logo">
            <h1>
                      Logo
                    </h1>
          </div>
        </div>

        <div class="main-top-header-right">
          <div class="menu">
            <ul>
              <li><a href="#">one</a>
              </li>
              <li><a href="#">two</a>
              </li>
              <li><a href="#">three</a>
              </li>
              <li><a href="#">four</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- END OF TOP HEADER -->

      <div class="main-search">
        <div class="searching">
          <span>type something</span>
          <br>
          <input class="search" type="text" name="search" placeholder="typing">
          <button class="search">
            <span>find</span>
          </button>
        </div>
      </div>

    </div>
  </div>
</header>

<nav class="row">
  <div>
    <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12">

    </div>
  </div>
</nav>

Answer 1

删除 .main-top-header { position: absolute; } 和 .main-top-header-left { position: relative; 将起作用