如何删除 vue 应用程序中神秘的白色区域？-PHP中文网问答

我正在尝试使用 vue 3 构建一个网站并为其设置背景图片。但有一个神秘的白色区域无法去除。我确信这不是边距或填充，因为我已将所有边距和填充设置为 0，并删除了所有 ml ,pl 类。我将应用程序组件的黑底颜色设置为黑色，但该区域仍然是白色的。 chrome的inspect工具说这是一个html元素，请帮帮我。（我把backgroup图片放在Login.vue的style部分了。）

来自浏览器检查工具的信息：

用农药检查：

<!-- index.html -->
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>

    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

<!-- app.vue --!>
<template>
    <div id="app">
      <div class="container">
        <router-view />
      </div>
    </div>
</template>

<script>
export default {
  name: "app"
};
</script>

<style>
#app {
  padding: 0;
  margin: 0px;
  background-color: black;
}
</style>

我把backgroup图片放在Login.vue的style部分。

<!-- Login.vue --!>
<template>
  <div class="body" id="poster">
    <el-form class="login-container">
      <el-card>
        <h4 class="login-title mb-2">Log in</h4>
        <el-form-item>
          <input type="text" class="form-control" id="username"
                 v-model="loginForm.username" placeholder="username"
          />
        </el-form-item>

        <el-form-item>
          <input type="text" class="form-control" id="password"
                 v-model="loginForm.password" placeholder="password"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="login" type="primary"
                     style="width: 100%">Submit</el-button>
        </el-form-item>
      </el-card>

    </el-form>
  </div>
</template>

<script>
import http from '../http'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      responseResult: [],
    }
  },
  methods: {
    login() {
      const data = {
        username: this.loginForm.username,
        password: this.loginForm.password
      }
      http.post('/login', data)
          .then(response => {
            console.log(data);
            if (response.data.code === 200) {
              this.$router.push('/index')
            }
          })
          .catch(e => {
            console.log(e);
          })
    }
  }
}
</script>


<style scoped>
.login-title {
  text-align: center;
}
body {
}
#poster {
  background: url("../assets/backgroud.jpg") no-repeat center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}
</style>

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'



const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')

// router.js
import { createWebHistory, createRouter } from "vue-router";

const routes = [
    {
        path: '/',
        alias: '/login',
        component: () => import('@/components/Login.vue')
    },
    {
        path: '/index',
        component: () => import('@/components/AppIndex.vue')
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router;

全部回复(1)

P粉2860467152023-09-12 14:34:13 1楼

使用引导类容器包装页面内容会导致最大宽度小于全屏宽度。文档显示每个断点的最大宽度值。不仅如此，引导容器也有填充。

如果你想删除空白空间，你应该将容器宽度设置为 100% 或使用类名 container-fluid ，它可以做同样的事情，并且还可以删除你可以用类做的填充p-0

<div class="container-fluid p-0">
  <router-view />
</div>

顺便说一句，我注意到您同时使用了 Element Plus 和 Bootstrap，它们都是大型 CSS/组件框架。继续前进，您很可能会遇到两个框架及其竞争的 CSS 样式之间的许多令人沮丧的冲突。我建议仅使用其中一个框架！

赞 +0

添加回复