Question

当项目上传到AWS实例页脚右侧时，我正在使用mdb主题。我检查了css的mdb主题默认情况下页脚的宽度为100％。

下面是代码-

App.vue

<template>
<div id="app">
<div class="flexible-content">
  <navbar :page="activePage" />
  <main class="mt-5 p-5">
    <div class="pt-5">
      <router-view></router-view>
    </div>
  </main>
  <div class="white-skin">
    <copyrights />
    </div>
    </div>
   </div>
  </template>

<script>
import SideNav from './components/SideNav'
import Navbar from './components/Navbar'
import Copyrights from './components/Footer'
import * as vm from "vue";
export default {
name: 'App',
mode:'history',
components: {
SideNav,
Navbar,
Copyrights
},
data () {
return {
  activePage: 'dashboard',
  toggle: false,
  loader:true,
}
},
mounted () {
this.activePage = this.$route.name;
this.$on('toggle', function (value) {
  this.toggle = value
});
},
updated () {
this.activePage = this.$route.name
 }
 }
 </script>

 <style>
 #app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
  margin-top: 60px;
  }
  </style>

Footer.vue

<template>
<mdb-footer>
<p class="footer-copyright mb-0 py-3 text-center">
 &copy; {{new Date().getFullYear()}} Copyright: <a 
 href=""  target="_blank"> xyz </a>
 </p>
 </mdb-footer>
 </template>
 <script>
 import { mdbFooter } from 'mdbvue'

 export default {
 name: 'Footer',
 components: {
 mdbFooter
 },
 data () {
 return {
 }
 }
 }
 </script>
 <style scoped>
 </style>

这是App.vue和Footer.vue的代码。它可以在localhost上正常运行，但不能在实例上运行。在实例页脚上载后，右侧出现中断

在vue js中，mdb footer中断如何解决此问题？

0 个答案: