Проблема с нижним колонтитулом Bootstrap 4 при использовании с Angular - PullRequest
Новая
       25

Проблема с нижним колонтитулом Bootstrap 4 при использовании с Angular

0 голосов
/ 23 мая 2019

Я пытаюсь сделать так, чтобы Bootstrap 4 нижний колонтитул придерживался нижней части страницы. Я устанавливаю класс mt-auto для элемента нижнего колонтитула, а flex и h-100 для html и body.

Работает как положено, если весь код находится в одном файле index.html. Однако, если я перенесу часть нижнего колонтитула в компонент, mt-auto, похоже, не будет работать, и нижний колонтитул не будет сдвинут вниз.

app.component.html: 

<footer class="mt-auto"> 
  <div class="container">
    Footer text goes here.
  </div>
</footer>

index.html: 

<!doctype html>
<html lang="en" class="h-100">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Sticky Footer</title>
    <base href="/">
  </head>
  <body class="d-flex flex-column h-100">
    <app-root></app-root>
</body>
</html>
...