如何在不使用 !important 的情况下自定义 twitter bootstrap 的各种输入大小？

Bootstrap 的输入大小仅按宽度扩展，而按钮则按高度和字体大小扩展。 （见图）我正在尝试自定义输入以按高度和字体大小进行扩展。 （注意：他们正在为下一个版本修复这个问题，但我太不耐烦了）

到目前为止我只能通过使用来实现这一点!importanthack 覆盖输入的 css。我想避免使用!important不惜一切代价，因为这是糟糕的做法。

目前，这是我用于扩展高度的代码.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;
}

有什么办法可以实现这个目标不删除默认的输入样式 and 不声明!important?

这是一个小提琴：http://jsfiddle.net/xryQK/ http://jsfiddle.net/xryQK/

而不是使用!important，你可以使用属性选择器 https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors这将覆盖默认值，因为它比简单地使用更具体class。不擅长特异性概念？参考this http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/文章。

为了计算选择器的特异性，您可以使用this http://specificity.keegan.st/网站。

^[1] Using class[attr=class]

.input-large[class="input-large"] {
    width: 400px;
}

OR

^[2] Using tag[attr=class]

input[class="input-large"] {
    width: 400px;
}

并使用!important如果你在正确的地方使用它，这并不是一个糟糕的做法。

Note that above selectors, ^[1] will make all elements width to 400px having a class of input-large and in case of selector ^[2], it will set width to 400px for all input elements having class of input-large, so if you want, you can call multiple classes i.e .class.class on input tag and use the selector below..

.input-large.input-large-altered {
    width: 400px;
}

所以这会选择any如果您想更具体并且只想设置，则设置这两个类的元素input type="text"比你总是可以写一个更具体的选择器，比如

input[type="text"].input-large.input-large-altered {
   width: 400px;
}

所以上面那句就only目标为input元素，其type属性持有一个value of text AND拥有两个班级，即.input-large .input-large-altered

Demo http://jsfiddle.net/xryQK/1/

Demo 2 http://jsfiddle.net/xryQK/2/

Demo 3 http://jsfiddle.net/xryQK/557/（多班）