css - Bootstrap Vue : mixing class names with tags

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 Playground (从他们的网站)并将以下代码粘贴到 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 标记中解决了问题。