html - 为什么这些具有完全相同类的按钮具有不同的宽度？

Question

我有两个按钮。

它们具有完全相同的类。

但一个比另一个宽得令人费解。

页面上的所有其他按钮都像“声明”按钮一样呈现全宽。这些按钮的右边没有任何东西。我尝试刷新浏览器缓存和 Laravel 的 View 缓存。您看到的类(class)来自 Tailwind 和 Bulma，除此之外我没有接触过:

.button:active {
    position:relative;
    top:2px;
}

这里会发生什么？

更新:

回应 Phix 和 Saqib，是的，它确实有一个 flex 的祖 parent ，但我

• 删除了 app.scss 中的所有自定义 css
• 创建了一个演示组件，其中只有一个容器和一个类为“buttons”的 div
• 直接在 main 中单独渲染

令人难以置信的是，我仍然遇到同样的问题。没有“按钮”类的 div，按钮大小相同。但我不明白为什么“按钮”会这样做。

更新 2

这是我设置固定宽度时发生的情况:

有人可能清楚地知道哪里出了问题？很遗憾，我没有。

Answer 1

我被告知不要将我自己的问题标记为已解决，所以我正在写我在这里找到的解决方案。

问题在于混合使用 Tailwind 和 Bulma。解决方案是使用 is-fullwidth 而不是 w-full。 Bulma 应用了检查 is-fullwidth 的边距，但显然不知道 w-full。

修改“按钮”或“按钮”类不起作用，但我现在知道我需要使用 .buttons:not(:last-child) {}。但是，切换到 is-fullwidth 更有意义。