如何在引导弹出窗口关闭类中覆盖 CSS 类？答案

【问题标题】：How to overwrite CSS class in bootstrap popover close class?如何在引导弹出窗口关闭类中覆盖 CSS 类？
【发布时间】：2016-10-26 15:36:21
【问题描述】：

我想要一个引导弹出框中的关闭按钮，该按钮采用弹出框的引导“btn btn-primary”类的样式。我目前有以下实现：

<button type="button" class="btn btn-primary close" href="#">Dismiss</button>

但是，关闭按钮的样式是“关闭”类的样式。它看起来像这样：

如何在不删除关闭类的情况下将关闭按钮的样式更改为 btn 和 btn-primary，使其看起来像这样？

【问题讨论】：

用“！important”将css写入'close'类
@NitinDhomse 知道如何为 btn 类执行此操作吗？
使用类似，.close { property-name : value !important;这将强制覆盖您给定的 css 样式，并且不要这样做将 btn 类。它可能会影响您原来的引导 css
是否还有一种方法可以做到这一点而不必从头开始重写 btn 类？
复制.btn类的css（用你的风格修改）并将其应用到新类，不要使用btn类

标签： css twitter-bootstrap

【解决方案1】：

以样式style=""

编写您的自定义css

<button type="button" class="btn btn-primary close" href="#" style:"padding:8px">Dismiss</button>

【讨论】：

但我想要 btn btn-primary 引导类的 css 样式。有没有办法在不重新实现整个课程的情况下做到这一点？

【解决方案2】：

试试这个 CSS：

.close {
  background: rgba(0, 0, 0, 0) linear-gradient(#007bcf, #0048cf) repeat scroll 0 0;
  border: medium none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 26px;
  letter-spacing: 1px;
  padding: 10px 30px;
}

&lt;button type="button" class="btn btn-primary close" href="#"&gt;Dismiss&lt;/button&gt;

【讨论】：

【解决方案3】：

.btn.btn-primary.close {
  background: rgba(0, 0, 0, 0) linear-gradient(#007bcf, #0048cf) repeat scroll 0 0;
  border: medium none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 26px;
  letter-spacing: 1px;
  padding: 10px 30px;
}

&lt;button type="button" class="btn btn-primary close" href="#"&gt;Dismiss&lt;/button&gt;

【讨论】：

【解决方案4】：

您可以使用linear gradient 属性。 read more about linear gradient

.close {
 background: rgba(0, 0, 0, 0) linear-gradient(#429fdf, #043da9) repeat scroll 0 0;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 25px;
  letter-spacing: 1px;
  padding: 10px 20px;
}

&lt;button type="button" class="btn btn-primary close" href="#"&gt;Dismiss&lt;/button&gt;

【讨论】：

【解决方案5】：

编写您自己的类并将样式应用于该类并在 boostrap css 可能对您有所帮助之后调用您的 css 文件..

【讨论】：

【解决方案6】：

如果这是您的问题，您可以在同一页面中更改您的样式..

<style type="text/css">
  .close {
    //changes here
  }
</style>

【讨论】：

有没有办法在不重写完整的 css 类的情况下做到这一点？