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

Question

我想在页面中放下页脚（版权声明）。但是它在页脚下方添加了一些额外的空白。我怎么除去这个额外的空白？

我正在这个VueJS项目中做。这是我的代码。

应用程序

<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>

页脚

<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标签的底边都是：1rem; 如果您删除了页边距的底部，它将固定在页面底部。

.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>