Nuxt.js + BootstrapVue: Как разместить карточку формы в центре страницы?

У меня есть карточка с формой / хочу разместить в центре страницы.

Вот мой макет пустой:

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

На экране это выглядит так: введите описание изображения здесь

Но я хочу, чтобы это выглядело так: введите описание изображения здесь

Не могу найти, как это сделать. Вы можете мне помочь?


vue.js nuxt.js bootstrap-4 bootstrap-vue
person Alexander Lopatin    schedule 13.09.2019    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете использовать комбинацию гибких служебных классов и служебные классы размещения с добавлением пользовательского стиля:

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

Возможно, вам придется немного изменить приведенные выше стили.

person Troy Morehouse    schedule 13.09.2019