перемещение последнего ряда к нижней части контейнера в bootstrap 4

Question

У меня есть простой нижний колонтитул с контактной информацией, которая состоит из трех строк. Первые два появляются сверху, последний должен быть размещен в самом низу контейнера. Итак, я использовал абсолютное позиционирование:

footer .verybottom {
  position: absolute;
  bottom: 0px;
  background-color: grey;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer id="kontakt">
  <div class="container">
    <div class="row">
      <div class="col md-12">
        <h2>Contact</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        Adress
      </div>
      <div class="col-md-6">
        something else
      </div>
    </div>
    <div class="row verybottom">
      <div class="col-md-6">
        some more Text
      </div>
      <div class="col-md-6">
        some more Text
      </div>
    </div>
  </div>
</footer>

Позиционирование работает хорошо, но что бы я ни делал - последний ряд только шириной, как столбец над ним. Может ли кто-нибудь помочь мне выровнять содержимое строк выше?

Answer 1

Вам нужно поместить контейнер внутрь, чтобы заставить его работать ... и затем ввести еще один .row, поскольку мы хотим, чтобы классы col-md-XX работали

, работающие фрагмент :

footer .verybottom {
  position: absolute;
  bottom: 0px;
  background-color: grey;
  padding-left: -15px;
}

.row {
  border: 1px dotted red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<footer id="kontakt">
  <div class="container">
    <div class="row">
      <div class="col md-12">
        <h2>Contact</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        Adress
      </div>
      <div class="col-md-6">
        something else
      </div>
    </div>
    <div class="row">
      <div class="container verybottom">
        <div class="row">
          <div class="col-md-6">
            some more Text
          </div>
          <div class="col-md-6">
            some more Text
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>