Css 在引导4选项卡中对齐关闭图标

我正在尝试将

BootstrapVue

选项卡的关闭图标与右上角的bootstrap4.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>

{{order.name}
&时代；
所容纳之物

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

我想要的是

X

显示在选项卡的右上角

---

如何做到这一点并使选项卡在激活时看起来正常？

在本例中，css position属性是您的朋友

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

---

在本例中，css位置属性是您的朋友

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

---

如果您使用的是BS4，则可以添加此样式以使右上角的“关闭”按钮生效

<button type="button" class="p-4 position-absolute top-0 right-0">
     <span>×</span>
</button>

×

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

<button type="button" class="p-4 position-absolute top-0 right-0">
     <span>×</span>
</button>

×

不要将

放在

导航项中

！如果必须的话，请准备覆盖Bootstrap按钮及其状态（活动、焦点）附带的整个CSS。相反，您应该使用一个简单的锚。即使是（看起来像按钮的）也使用

s（查看页面源代码内部）。唯一的类是

nav link

（++

active

，激活时）。不要将

放在

.nav项中！如果必须的话，请准备覆盖Bootstrap按钮及其状态（活动、焦点）附带的整个CSS。相反，您应该使用一个简单的锚。即使是（看起来像按钮的）也使用
s（查看页面源代码内部）。唯一的类是
导航链接
（++
活动时
）。