css - 表单 CSS 样式正在影响 Bootstrap 按钮

Question

我正在使用一个名为 sky-forms 的表单模板。有几种 CSS 样式应用于此模板的整个表单，使我的 Bootstrap 按钮看起来很奇怪(带有彩色背景的按钮文本)。有没有办法让我的 Bootstrap 按钮以某种方式忽略天空形式样式？

似乎导致 Bootstrap 问题的样式如下:

.sky-form *,
.sky-form *:after,
.sky-form *:before {
    margin: 0;
    padding: 0;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
}

当我删除这些样式时，我的 Bootstrap 提交按钮看起来不错，但表单会损坏。

Answer 1

人们经常在规则后面加上!important来覆盖其他样式，比如

.myclass {
    color: red! important;
}

但是，我不喜欢这种方法。

所以关于你的问题，看起来主题有点粗制滥造。 .sky-form * 表示“.sky-form 中的任何元素”。所以它在 .sky-form 作为 box-sizing: content-box;。看看Bootstrap's buttons , 他们的 box-sizing 似乎是 box-sizing: border-box;。所以我要做的是再次覆盖按钮(在我自己的 style.css 文件中)并用 border-box 替换 box-sizing 属性。

所以...

.sky-form .btn,
.sky-form .btn:after,
.sky-form .btn:before {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

这应该可以解决您的问题。您可能还想添加默认内边距(padding: 6px 12px;)。