尝试获取 Bulma 像素细节：底部边框与文本宽度相同的选项卡

Question

我正在为我正在构建的某些前端使用 Bulma.io，并希望达到像素细节级别。

我想知道 TABS 组件是否有一些 scss 编辑器可以用于 将底部边框拉伸为文本 ，不是整个div，如下图所示：

这是我的实际结果，您会注意到蓝线不仅覆盖文本，而且全部转到下一个 TAB：

谢谢！

Answer 1

您可以使用：

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

但是，由于 Bulma 要求构建选项卡的方式，这样做也使得活动选项卡中左右区域不再可点击。这可能不是问题，因为有问题的选项卡是选定的选项卡，因此没有理由单击它。