Nuxt.js + BootstrapVue：如何将表单卡放置在页面中央？
Ale*_*tin 1 vue.js bootstrap-4 nuxt.js bootstrap-vue
我有一张带有表格的卡片/我想将其放在页面的中央。
这是我的布局“空”：
<template>
<nuxt />
</template>
<script>
export default {
name: 'Empty'
}
</script>
<style></style>
我有下一页的表格：
<template>
<b-card>
<b-form @submit.stop.prevent="onSubmit">
...
</b-form>
</b-card>
</template>
我得到下一个结果：
<body data-gr-c-s-loaded="true">
<div id="__nuxt">
<!---->
<!---->
<div id="__layout">
<div class="card">
<!---->
<!---->
<div class="card-body">
<!---->
<!---->
<form class="">
...
</form>
</div>
<!---->
<!---->
</div>
</div>
</div>
...
</body>
在屏幕上，它看起来像：
但我想要它看起来像：
我找不到怎么做。你能帮助我吗？
您可以结合使用 bootstrap v4.3 flex 实用程序类和位置实用程序类以及一些自定义样式：
<div
class="fixed-top d-flex align-items-center justify-content-center"
style="bottom: 0; overflow-y: auto"
>
<b-card style="max-width: 400px;">
<form>
<b-form-input class="mb-2"></b-form-input>
<b-form-input class="mb-2"></b-form-input>
<b-form-input class="mb-2"></b-form-input>
<b-form-input class="mb-2"></b-form-input>
</form>
</b-card>
</div>
您可能需要稍微调整上面的样式。