【问题标题】:Form CSS styles are impacting bootstrap buttons表单 CSS 样式正在影响引导按钮
【发布时间】:2015-03-19 05:47:19
【问题描述】:

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

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

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

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

【问题讨论】:

  • 如果你能用 sn-p 复制问题,帮助你会更容易。

标签: css twitter-bootstrap


【解决方案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;)。

【讨论】:

  • 使用您发布的代码并添加填充似乎已经解决了这个问题。
  • 如果您对其他元素有其他问题,但请进入 Bootstraps 代码并查找它的默认值并再次覆盖它。
【解决方案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 的样式。

【讨论】:

  • 你是对的。当前的两个答案都不能解决问题。我无法缩小为什么这不起作用。我什至在努力在 JSfiddle 中重现这个问题。正如我所提到的,当我删除原始问题中的 CSS 代码时,按钮看起来很完美,但表单中断了。
  • 啊,我明白了! margin: 0padding: 0 使 .sky-form 中的每个元素都没有边距和填充(由于选择器的 * 部分)。如果它们被用作 css 重置,您可以尝试将其设置为 inherit,因为 Bootstrap 已经包含 css 重置。否则,恐怕您将不得不使用例如Chrome 的 DevTools 并通过继承它们来查看哪些元素使用这些样式,然后将它们添加到这些元素中。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-03-05
  • 1970-01-01
  • 1970-01-01
  • 2015-02-14
  • 2020-11-16
  • 2012-09-16
  • 2018-01-07
相关资源
最近更新 更多