Javascript 使用引导Vue创建复杂的面板

基于上一个问题，我开始使用以下代码创建面板：

<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>

回去
数据运行：
{{title（）}}
{{{subtitle（）}}

它看起来是什么样子：

---

如何创建这样的面板？

您可以通过在页眉上使用

display:flex

来实现这种外观。 将class

d-flex

添加到标题中，并将按钮包装在一个div中，并为其指定class

ml auto

，该类应用样式

左边距：auto

使用
marginleft:auto
内部
display:flex
将用边距填充空白，将内容推向相反方向


数据运行：标题

字幕
回去


newvue({
el:“应用程序”
});

数据运行：标题

字幕
回去