Попытка получить детализацию пикселя Bulma: вкладки с нижней границей такой же ширины, что и текст

Question

Я использую Bulma.io для какого-то интерфейса, который я строю и хотел перейти на уровень детализации пикселей.

Мне было интересно, есть ли какое-нибудь редактирование scss для компонента TABS , который я мог бы использовать для , растягивая нижнюю границу до текста , а не до всего div, какна следующем изображении:

и вот мой фактический результат, где вы можете заметить, что синяя линия не просто покрывает текст, но идет все кследующая вкладка:

Спасибо!

Answer 1

Вы можете использовать:

.tabs li.is-active {
    padding-left: 1em;
    padding-right: 1em;
}
.tabs li.is-active a {
    padding-left: 0;
    padding-right: 0;
}

Однако из-за того, как Булма требует построения вкладок, это также делает так, что области слева и справа внутри активной вкладки больше не будуткликабельны.Это может не быть проблемой, поскольку рассматриваемая вкладка является выбранной, поэтому нет особой причины нажимать на нее.