html - 试图获取 Bulma 像素细节 : Tabs with bottom border same width as text

Question

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

我想知道是否对 TABS 组件进行了一些 scss 编辑，我可以使用它来将底部边框拉伸(stretch)为文本，而不是整个 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 要求构建选项卡的方式，这样做也使得事件选项卡中左侧和右侧的区域不再可点击。这可能不是问题，因为有问题的选项卡是选定的，因此没有理由点击它。