使用Bootstrap-Vue创建复杂的面板

Question

基于上一个关于Vue-Bootstrap panel的问题，我开始使用以下代码创建面板：

<b-card no-body class="mb-1">
    <b-card-header header-tag="header" class="p-1" role="tab">
        <b-button block disabled href="#" v-b-toggle.accordion-1 variant="info">Search:</b-button>
    </b-card-header>
    <b-collapse id="accordion-1" visible accordion="my-accordion" role="tabpanel">
        <b-card-body>
            <search-form :fieldList="fieldList" :customs-max-num="customsMaxNum" :data-types="dataTypes" />
        </b-card-body>
    </b-collapse>
</b-card>

如您所见，我有一个按钮作为标题。但是，如果我想做更复杂的事情怎么办？例如，我想创建以下标题：

如您所见，此标题包含标题和按钮。如果我像以前那样做，我将有一个按钮和一个按钮上的文字？感觉不对。我目前拥有的是：

<b-card no-body class="mb-1">
    <b-card-header header-tag="header" class="p-1" role="tab">
        <div class="title align-left" height="100px">
            <button class="pull-right btn btn-info" @click="goBack()">Go Back</button>
            <strong>Data run:</strong>
            {{ title() }} <br> {{ subtitle() }}
        </div>
    </b-card-header>
    <!-- BODY -->
</b-card>

外观如何：

如何创建这样的面板？

Answer 1

<b-card no-body class="mb-1">
  <b-card-header header-tag="header" role="tab" class="d-flex">
    <div class="title align-left" height="100px">
      <strong>Data run:</strong> Title<br> 
      Subtitle
    </div>
    <div class="ml-auto">
      <button class="btn btn-info">Go Back</button>
    </div>
  </b-card-header>
</b-card>