表单 CSS 样式正在影响引导按钮

Question

我正在使用一个名为 sky-forms 的表单模板。有几种 CSS 样式应用在这个模板的表单中，使我的引导按钮看起来很奇怪（带有颜色背景的按钮文本）。有没有办法让我的引导按钮以某种方式忽略天空形式的样式？

似乎导致引导问题的样式如下：

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

当我删除这些样式时，我的引导提交按钮看起来不错，但是表单中断了。

Answer 1

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

.myclass {
    color: red! important;
}

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

所以关于你的问题，看起来主题有点粗制滥造。 .sky-form * 表示“.sky-form 中的任何元素”。因此，它在.sky-form 中将所有内容（button,input,div,p）作为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;)。

Answer 2

.sky-form { box-sizing: content-box } 重置 Bootstrap 中使用的* { box-sizing: border-box }。 border-box 值使元素的宽度包括内容、内边距和边框，而不仅仅是内容。

对于.sky-form 中使用的Bootstrap 元素，简单地再次覆盖box-sizing 就足够了。要为按钮 .btn 执行此操作，请将以下内容添加到您的 css：

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

我尝试添加一个小示例，说明这可能如何工作，.sky-form 类已从您的代码中复制，因此不包括所有天空形式的样式

.row {
  margin-top: 15px;
}

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

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

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <button class="btn btn-primary">Default Bootstrap button</button>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="sky-form">
        <button class="btn btn-primary">Bootstrap button inside a sky-form</button>
      </div>
    </div>
  </div>
</div>

有关详细信息，请参阅 Bootstrap 文档中的 Third party support - Box-sizing。这是关于 Bootstrap 的 box-sizing 破坏第三方组件，但可能会给你一个更好的解释。

P.S.这可能还不够，因为我认为.sky-form 中很可能有更多的 css 声明覆盖了 Bootstrap 的样式。