Как мне исправить мою навигационную панель в bootstrap vue, чтобы она была в центре? - PullRequest
Новая
       43

Как мне исправить мою навигационную панель в bootstrap vue, чтобы она была в центре?

1 голос
/ 23 марта 2020

Как я могу поместить свой компонент navbar в центр? Я делаю это впервые, у меня все получилось нормально, но я не могу решить эту проблему, поэтому она не выглядит странно 

<template>
  <div class="container">
    <header>
      <h1>GIF'S APP</h1>
      <form>
        <span class="font-semibold mr-2 text-left flex-auto text-white">Search for the coolest gifs</span>
        <div>
          <b-nav-form>
            <b-input-group>
              <b-form-input id="input-small" size="sm" type="text" v-model="search" />
              <b-button class="btn-success" type="button" v-on:click="searchNewGifs()">Search</b-button>
              <div class="gifs--container">
                <Gif v-for="gif in gifs" v-bind:key="gif.id" v-bind:data="gif"></Gif>
              </div>
              <b-button
                class="btn-success"
                type="button"
                v-if="!stopNextPage"
                v-on:click="getNextPage()"
              >Next Page</b-button>
            </b-input-group>
          </b-nav-form>
        </div>
      </form>
    </header>
  </div>
</template>

1 Ответ

2 голосов
/ 23 марта 2020

используйте класс mx-auto горизонтальный центр и класс my-auto для вертикального центра, и если вы хотите сделать горизонтальный и вертикальный центр, используйте m-auto и ПРИМЕЧАНИЕ: очень важно, чтобы родитель имел стиль dispaly: flex и класс, доступный для этого d-flex.

...