“ Bootstrap 4”标签中的对齐关闭图标

Question

我正在尝试将BootstrapVue标签的关闭图标与右上角的Bootstrap 4.2对齐。

<b-tab v-for="order in tabs" :key="order.id">
    <template slot="title">
        <span class="float-left">{{ order.name }}</span>
        <b-button type="button" class="close float-right" aria-label="Close" @click="closeTab(order.id)">
            <span aria-hidden="true">&times;</span>
        </b-button>
    </template>
    ...content....
</b-tab>

但是，不仅它没有按预期正确对齐，而且在聚焦时该选项卡显示为被切掉：

我想要的是使X出现在标签的右上角。

我该如何做才能使标签在激活时看起来正常？

Answer 1

如果您使用的是BS4，则可以添加此样式以在右上角显示关闭按钮

console.error()

Answer 2

在这种情况下，css position属性是您的朋友

template {
position: relative;
} 
template button {
position: absolute;
right:0px;
}