表单 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 * 表示 "any element inside .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 class 已从您的代码中复制，因此不包括所有天空形式的样式

.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 的样式。

表单 CSS 样式正在影响 bootstrap 按钮

Form CSS styles are impacting bootstrap buttons

css

twitter-bootstrap