时间戳

首页 > 解决方案 > 带有bootstrap4的Angular 7粘性页脚

css - 带有bootstrap4的Angular 7粘性页脚

问题描述

我正在学习 angular7，我会创建一个粘性页脚。我已经尝试了很多解决方案。

我试过 ：

没有人为我工作。我不明白为什么，我需要帮助。

删除所有我尝试过的代码后，我有这个代码：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  declarations: [
    AppComponent,
    MenuComponent,
    FooterComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

index.html（只是正文）

<!doctype html>
<html lang="en">
<head>
  ...
</head>
<body class="d-flex flex-column h-100">
  <app-root></app-root>
</body>
</html>

app.component.html

<app-menu></app-menu>

<main class="container">
  <router-outlet></router-outlet>
</main>

<div class="footer mt-auto py-3">
  <app-footer></app-footer>
</div>

页脚.component.html

<footer>
  &copy; 2019 - Zackna
</footer>

编辑：我用我已经尝试过但删除的@avcajaraville 答案更新了我的代码^-^。还有 我的结果，你可以看到我的页脚没有粘在页面底部。

是否存在引导本机解决方案？我的页脚没有确定的高度。我需要做什么来实现我的目标？

标签： cssbootstrap-4angular7

解决方案

根据您的代码示例，您没有添加所需的类。

您可以通过模仿与您提供的示例相同的结构来解决此问题：

索引.html

<!doctype html>
<html lang="h-100">
<head>
  ...
</head>
<body class="d-flex flex-column h-100">
  <app-root></app-root>
</body>
</html>

app.component.html

<app-menu></app-menu>
<main class="container">
  <h1>title</h1>
  <router-outlet></router-outlet>
</main>
<div class="footer mt-auto py-3">
  <app-footer></app-footer>
</div>

我认为这会给你预期的行为。

通常，在使用 CSS 框架时，您需要使用 html 中指定的类。否则，无法应用 CSS。

编辑

我在 index.html 文件的 html 标记上添加了所需的类并重构 app.component.html

推荐阅读