Html 如何在不使用 !important 的情况下自定义 twitter bootstrap 的各种输入大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14022644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I customize twitter bootstrap's various input sizes without using !important?
提问by Michelle
Bootstrap's input sizes only expand by width, whereas the buttons expand by both height and font size. (see pic) I'm trying to customize the inputs to expand by height and font size as well. (Note: they're fixing this for the next version, but I'm too impatient to wait)
Bootstrap 的输入大小仅按宽度扩展，而按钮按高度和字体大小扩展。（见图）我正在尝试自定义输入以按高度和字体大小扩展。（注意：他们正在为下一个版本修复这个问题，但我已经迫不及待了）
So far I can only achieve this by using the !importanthack to override the input css. I want to avoid using !importantat all costs, because it is awful practice.
到目前为止，我只能通过使用!importanthack 覆盖输入 css 来实现这一点。我想!important不惜一切代价避免使用，因为这是糟糕的做法。
Currently, this is the code I have for expanding the height of .input-large. It does not work when I remove !important. I assume this is because inputs are given higher priority than classes (which I find absolutely silly, but correct me if I'm wrong).
目前，这是我用于扩展.input-large. 当我删除!important. 我认为这是因为输入的优先级高于类（我觉得这绝对是愚蠢的，但如果我错了，请纠正我）。
.input-large {
width: 210px;
height: 44px !important;
margin-bottom: 10px !important;
line-height: 30px !important;
padding: 11px 19px !important;
font-size: 17.5px !important;
}
Is there any way I can achieve this without removing the default input stylingand not declaring !important?
有什么方法可以在不删除默认输入样式和不声明!important的情况下实现这一点吗？
Here's a fiddle: http://jsfiddle.net/xryQK/
这是一个小提琴：http: //jsfiddle.net/xryQK/
采纳答案by Mr. Alien
Instead of using !important, you can use an attribute selectorwhich will override the default as it will be more specific than simply using a class. Not good with specificity concept? Refer thisarticle.
除了使用!important，您可以使用属性选择器来覆盖默认值，因为它比简单地使用class. 不擅长特异性概念？参考这篇文章。
For calculating the specificity of your selectors, you can use thiswebsite.
为了计算你的选择器的特异性，你可以使用这个网站。
[1]Using class[attr=class]
[1]使用class[attr=class]
.input-large[class="input-large"] {
width: 400px;
}
OR
或者
[2]Using tag[attr=class]
[2]使用tag[attr=class]
input[class="input-large"] {
width: 400px;
}
And using !importantis not an awful practice if you use it in the right place.
并且使用!important不是一个可怕的做法，如果你在正确的地方使用它。
Note that above selectors, [1]will make all elementswidthto 400pxhaving a classof input-largeand in case of selector [2], it will set widthto 400pxfor all inputelements having classof input-large, so if you want, you can call multiple classesi.e .class.classon inputtag and use the selector below..
需要注意的是上面的选择，[1]将所有元素width，以400px具有class的input-large和选择的情况下，[2] ，它将设置width到400px为所有input有内容class的input-large，所以如果你愿意，你可以调用多个类，即.class.class对input标签和使用下面的选择器..
.input-large.input-large-altered {
width: 400px;
}
So this will select anyelement having both of these classes set, if you want to be more specific, and want to set only for input type="text"than you can always write even a more specific selector like
因此，这将选择具有这两个类设置的任何元素，如果您想更具体，并且只想设置input type="text"比您总是可以编写更具体的选择器，例如
input[type="text"].input-large.input-large-altered {
width: 400px;
}
So the above one will onlytarget to inputelement whose typeattribute is holding a valueof textANDhaving both the classes i.e .input-large.input-large-altered
因此上述一个将只定位到input元素，其type属性保持value的text与具有两个类即.input-large.input-large-altered
Demo 3(Multiple classes)
演示 3（多类）
回答by gamehelp16
AFAIK you just put your own customized css after the bootstrap's
AFAIK 你只是把你自己定制的 css 放在引导程序之后
example:
例子：
... Some codes here ...
<link type="text/css" rel="stylesheet" href="bootstrap.css">
<style>
.input-large {
width: 210px;
height: 44px;
margin-bottom: 10px;
line-height: 30px;
padding: 11px 19px;
font-size: 17.5px;
}
</style>
... another code ...
Sorry, i forgot to delete the !importantThe !importantis not needed
对不起，我忘了删除!important的!important不需要
回答by Vincent Theeten
If you're working off of the bootstrap .less files
如果您正在使用 bootstrap .less 文件
an easy solution would be to add an extra entry like:
一个简单的解决方案是添加一个额外的条目，如：
.form-fatter {
// Set font for forms
label,
input,
button,
select,
textarea {
// Increase the default with 20%
#font > .shorthand(@baseFontSize*1.2,normal,@baseLineHeight*1.2);
}
}
in your html
在你的 html
<form class="form-horizontal form-fatter">
...
</form>
