如何使用引导程序以角度创建页脚？

Question

我为我的网页创建了一个有角度的页脚。但它与网站中的内容重叠。我怎么弄红这个？ Output

代码：

<footer class="footer bg-dark fixed-bottom footer-design">
  <div class="text-white text-center mr-3">
      © 2019 Copyright
  </div>
</footer>

Answer 1

只需从页脚中删除 fixed-bottom 类。

<footer class="footer bg-dark footer-design">
  <div class="text-white text-center mr-3">
      © 2019 Copyright
  </div>
</footer>

Answer 2

这是一个 HTML 布局问题 - 与 Angular 无关。您甚至不需要为此使用引导程序。 您可以使用 flex - 使用flex-basis: 50px;（例如）设置页脚，其余的使用flex-grow:1;。这将为您的页脚设置一个固定大小，并将其余部分拉伸到整个页面。

body,
html {
  height: 100%;
  padding: 0;
  margin: 0;
}

.page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.content {
  flex-grow: 1;
}

.footer {
  flex-basis: 50px;
  background-color: black;
  color: white;
  text-align: center;
}

<div class="page">
  <div class="content">Content here</div>
  <div class="footer">Footer</div>
</div>

如果您不希望页脚粘到底部，请删除容器的height:100%

body,
html {
  height: 100%;
  padding: 0;
  margin: 0;
}

.page {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}

.footer {
  flex-basis: 50px;
  background-color: black;
  color: white;
  text-align: center;
}

<div class="page">
  <div class="content">Content here</div>
  <div class="footer">Footer</div>
</div>