Выравнивание значка закрытия на вкладке 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, вы можете добавить этот стиль, чтобы сделать кнопку закрытия в правом верхнем углу

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

Answer 2

В этом случае свойство позиции css является вашим другом

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