Bootstrap 4 Контейнерная ширина неверна

Question

Я использую Bootstrap 4 "Контейнер", чтобы обернуть мой нижний колонтитул.

Ширина контейнера не покрывает нижнюю часть экрана, как ожидалось.Если я изменю Контейнер на Контейнер-флюид, он также не будет работать должным образом.

JSFiddle здесь: https://jsfiddle.net/1Zero3Tech/6p1rg3ub/3/

 <div class="container">
        <footer class="footer">
            <div class="row">
                <div class="col-6 text-left">
                    Some Text On The Left
                </div>
                <div class=" col-6 text-right">
                    Some Text On The Right
                </div>
            </div>
        </footer>
    </div>

.footer {
    position: absolute;
    bottom: 0;
    height: 60px;
    line-height: 60px;
    font-weight: 600;
    background-color: yellow;
}

Answer 1

container или container-fluid класс должен использоваться для покрытия области содержимого, а не ширины.

Итак, я реорганизовал структуру HTML, с этим footer будет отвечать заширина, а не container или container-fluid.Они будут отвечать за вашу область контента.

Для удобства я добавил класс fixed, который делает нижний колонтитул придерживаться нижней части страницы, но если вы не хотите использовать липкий нижний колонтитул, вывсегда можно удалить класс.

.footer {
  background-color: yellow;
  font-weight: 600;
  height: 60px;
  line-height: 60px;
}

.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<footer class="footer fixed">
  <div class="container-fluid">
    <div class="row">
      <div class="col-6 text-left">
        Some Text On The Left
      </div>
      <div class=" col-6 text-right">
        Some Text On The Right
      </div>
    </div>
  </div>
</footer>

Answer 2

И j08691, и Paulie_D верны. Выньте position: absolute и поместите несколько отрицательных полей для родителя .container. Возможно, вы захотите поэкспериментировать с тем, чтобы родитель .container прилипал к нижней части.