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它将固定在bottom页面。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;