css - VueJS Bootstrap CSS 如何在页面底部放置元素？

Question

我想将我的页脚(版权声明)放在页面下方。但它在页脚下方添加了一些额外的空白。我如何删除这个额外的空白区域？

我正在做这个 VueJS 元素。这是我的代码。

App.vue

<template>
  <div class="fluid-container">
    <app-header></app-header>
    <div style="min-height:610px;">

      <router-view></router-view>

    </div>

<div>
  <app-footer></app-footer>
</div>

  </div>
</template>

footer.vue

<template>
  <div class="fluid-container">
    <p class="text-center">Copyright &copy 2018, ABC Marketing. All Rights Reserved.</p>
  </div>
</template>
<script></script>
<style scoped>
div{
  color: white;
  background-color: #003459;

}
</style>

Answer 1

我认为在 footer.vue 中你将版权文本包装在 p 标签中，根据 bootstrap 4 p 标签有 margin-bottom: 1rem; 如果你删除了 margin-bottom 它将固定在底部页面的。

.fluid-container.footer{
  background: blue;
}
.fluid-container.footer > *:last-child {
    margin-bottom: 0px;
    color: #fff;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<div style="min-height:610px;">
</div>

<div>
  <div class="fluid-container footer">
    <p class="text-center">Copyright &copy; 2018, ABC Marketing. All Rights Reserved.</p>
  </div>
</div>

</div>