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一起使用，但不能与b-row或b-column之类的Bootstrap-Vue标记一起使用。任何帮助将不胜感激。

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标签中即可解决此问题。

Boostrap Vue：将类名与标签混合

1 个答案: