禁用一个元素的引导程序 [英] Disable bootstrap for one element

问题描述

我想要实现的是使用名为login_button的类为我自己的输入元素禁用Twitter Bootstrap类.默认情况下，bootstrap.min.css类向我的input.login_button元素添加了不必要的属性，例如box-shadow等.

我知道我可以定义box-shadow: none;，但是我想知道是否还有其他可能性可以实现?

解决方案

只需覆盖Bootstrap样式.只要自定义CSS之前的页面中包含了Bootstrap，那么CSS就应该覆盖Bootstrap，因为选择器的特异性是相同的.将此添加到自定义CSS并相应地覆盖样式:

 input.login_button {
    box-shadow: none;
    border: none;
    line-height: initial;
    /* Etc. */
}
 

此处input.login_button的特异性得分为011 Bootstrap的input[type="text"]仅具有010的特异性得分，这意味着您的自定义样式将足够强大，以覆盖Bootstrap的样式，而与CSS的顺序无关.

What I want to achieve is to disable the Twitter Bootstrap class for my own input element with class named login_button. By default the bootstrap.min.css class is adding unnecessary properties like box-shadow etc. to my input.login_button element.

I know I can define box-shadow: none; but I wonder if there are other possibilities to achieve that?

解决方案

Just override the Bootstrap style. As long as Bootstrap is included on your page before your custom CSS then your CSS should override Bootstrap as the specificity of the selector would be the same. Add this to your custom CSS and override the styles accordingly:

input.login_button {
    box-shadow: none;
    border: none;
    line-height: initial;
    /* Etc. */
}

Here input.login_button has a specificity score of 011 whereas Bootstrap's input[type="text"] only has a specificity score of 010, meaning your custom style will be strong enough to override Bootstrap's regardless of the order of your CSS.

这篇关于禁用一个元素的引导程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！