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 *表示＆＃34; .sky-form＆＃34;中的任何元素。因此，它将button内的所有内容（input，div，p，.sky-form）设为box-sizing: content-box;。看一下Bootstrap's buttons，他们的box-sizing似乎是box-sizing: border-box;。所以我要做的是再次覆盖按钮（在我自己的style.css文件中），并使用box-sizing重新发送border-box属性。

所以......

.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值使元素的宽度包含内容，填充和边框，而不仅仅是内容。

对于box-sizing中使用的Bootstrap元素，可能只是简单地覆盖.sky-form。要对按钮.btn执行此操作，请将以下内容添加到您的css中：

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

我尝试添加一个小例子来说明这可能有用，.sky-form类已从您的代码中复制过来，所以不包含所有天空形式的样式

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

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

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

2 个答案: