Bootstrap Vue：将 class 名称与标签混合

Question

(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 在我试图创建的页面上工作。我可以使用 class= 语法让它与标准 Bootstrap 4 一起工作，但不能与 Bootstrap-Vue 标签一起工作，例如 b-row 或 b-column。非常感谢任何帮助。

Answer 1

已解决

这个问题的答案是是，可以把两者结合起来。转到 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 标签解决了问题。

Bootstrap Vue：将 class 名称与标签混合

Boostrap Vue: mixing class names with tags

css

vue.js

bootstrap-4

bootstrap-vue