切换的容器应该向上移动其他容器

Question

我正在创建一个带有粘性页脚的非常基本的 html 页面，一个包含文本的容器，并且在页脚上方还应该有一个容器可以切换，但现在容器在打开时与文本重叠！

当显示/切换另一个容器时，我希望容器中带有文本的内容向上移动！

html,
body {
  font-family: 'Comfortaa', sans-serif;
  background-color: #ffffff;
  min-height: 100%;
}

.background {
  background: url(bg4.png) #e8f1d5 no-repeat left top;
  background-size: contain;
  height: 100vh;
}

.text {
  text-align: right;
  padding-top: 5%;
  padding-right: 5%;
}

#partner-toggle {
  position: fixed;
  bottom: 50px;
  text-align: center;
}

.partner {
  padding: 15px;
  display: flex;
  align-content: center;
  justify-content: center;
  background-color: rgb(235, 237, 249);
  /* Farbcode #ebedf9 */
  text-align: center;
  display: none;
}

.partner img {
  margin: 10;
}

.toggle-partner {
  cursor: pointer;
  background-color: #c1e1f0;
  width: 300px;
  border-radius: 15px 15px 0 0;
  text-align: center;
  padding-top: 10px;
  font-size: 1.2em;
  align-content: center;
  border: none;
}

footer {
  height: 50px;
  position: fixed;
  bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #46a4d2;
  padding: 5px;
  color: #ffffff;
}

<main class="background container-fluid">
  <div class="container-fluid text">
    Text....
  </div>
  <div id="partner-toggle" class="container-fluid">
    <button class="toggle-partner">Partner &nbsp; &nbsp;<span class="glyphicon glyphicon-menu-up"></span></button>
    <div class="partner container-fluid">
      <div class="row">
        <div class="container col-lg-3 col-md-6 col-sm-6 col-xs-12">
          Logo1

        </div>

        <div class="container col-lg-3 col-md-6 col-sm-6 col-xs-12">
          Logo2

        </div>

        <div class="container col-lg-3 col-md-6 col-sm-6 col-xs-12">
          Logo 3
        </div>

        <div class="container col-lg-3 col-md-6 col-sm-6 col-xs-12">
          Logo 4
        </div>
      </div>
    </div>
  </div>
</main>
<footer class="container-fluid">
  ...
</footer>

Answer 1

尝试在一个命令中切换两个容器。因此，当您切换一个容器时，带有文本的容器也会被切换，并将另一个容器的确切宽度向上移动。