Boostrap Vue: смешивание имен классов с тегами - PullRequest
Новая
       6

Boostrap Vue: смешивание имен классов с тегами

0 голосов
/ 31 августа 2018

(Bootstrap-Vue 2.0, Vue.js 2.5)

Мне было интересно, можно ли смешивать традиционные классы CSS Bootstrap 4 с Bootstrap-Vue. Например, могу ли я включить следующее: 

    <section id="introduction">
       <b-container class="h-100">
         <b-row class="h-100 fill-viewport align-items-center">
           <b-col cols="12">
             <h1 class="text-primary">Header text</h1>
              <p class="lead">This is my text, in a p tag</p>
           </b-col>
         </b-row>
       </b-container>
    </section>

с некоторыми базовыми CSS: 

<style>
body,html{
    height:100%;
}
</style>

Я спрашиваю об этом, потому что я не могу заставить align-items-center работать на странице, которую пытаюсь создать. Я могу заставить его работать со стандартным Bootstrap 4, используя синтаксис class=, но не с тегами Bootstrap-Vue, такими как b-row или b-column. Любая помощь с благодарностью.

1 Ответ

0 голосов
/ 31 августа 2018

решаемые

Ответ на этот вопрос таков: да , вы можете объединить оба. Если вы перейдете на игровую площадку Boostrap-Vue (с их сайта) и вставите следующий код в html, это сразу станет очевидным: 

<b-alert show> Hello {{ name }}! </b-alert>
<button class="btn btn-primary"> WOO BLUE BUTTON </button>
<b-btn v-b-popover.hover="'I am popover content!'" title="Popover Title" class="btn btn-danger">Hover Me</b-btn>

Моя проблема заключалась в том, что я не использовал тег h-100 для всех родительских тегов. Добавление этого тега section решило проблему.

...