Question

如何将绿色扩展到底部？以及如何将CRUD也向左移动

因此您可以看到它无法完全填满页面。

这是我在VueJS中的代码

    <template>
    <div class="container-fluid">
        <h1>CRUD</h1>
        <div class="my-form col-xs-1">
            <b-card class="box">
                <b-form-group id="input-group-1">
                    <b-form-input
                            id="input-1"
                            required
                            placeholder="Username"
                    ></b-form-input>
                </b-form-group>
                <b-form-group id="input-group-2">
                    <b-form-input
                            id="input-2"
                            type="password"
                            required
                            placeholder="Password"
                    ></b-form-input>
                </b-form-group>
                <div class="btn">
                    <b-button variant="primary" >Login</b-button>
                    <b-button variant="success" @click="$router.push('/register')">Register</b-button>
                </div>
            </b-card>
        </div>

    </div>
</template>

<script>
    export default {}
</script>

<style scoped>
    .container-fluid {
        background-color: green;
        height: 100%;
    }

    .my-form {
        display: block;
        margin-top: 120px;
        margin-bottom: 120px;
    }

    .box {
        padding: 10px;
        margin-bottom: 20px;
    }

    .btn {
        margin: 5px;
    }
</style>

这是我的错误？我前一段时间尝试使用flex，但不明白为什么它总是使内容适合自己。

对不起，我英语不好。

谢谢

Answer 1

只需在您的身体标签中写上即可解决您的问题

PrintArea

Answer 2

使用CSS更改背景色，并确保正文（文档）至少为视口高度的100％：

IAuthorizationService.AuthorizeAsync

要将“ CRUD”向左对齐，请使用Bootstrap实用程序类“ text-left”：

body {
  background-color: green;
  min-height: 100vh;
}

https://getbootstrap.com/docs/4.3/utilities/text/

https://bootstrap-vue.js.org/docs/reference/utility-classes

用背景颜色完全填充页面

2 个答案: