Контейнер, который переключает, должен переместить другой контейнер вверх - PullRequest
Новая
       14

Контейнер, который переключает, должен переместить другой контейнер вверх

0 голосов
/ 15 апреля 2019

Я создаю очень простую 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>

1 Ответ

0 голосов
/ 15 апреля 2019

Попробуйте переключить оба контейнера в одну команду. Поэтому, когда вы переключаете один контейнер, контейнер с текстом также переключается и перемещает точную ширину другого контейнера вверх на расстояние.

...