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

Question

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;
}

有没有办法在不删除默认输入样式而不是声明!important的情况下实现这一点？

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

Answer 1

!important您可以使用属性选择器代替使用,该属性选择器将覆盖默认值,因为它比仅使用a更具体class.具体概念不好？请参阅此文章.

要计算选择器的特异性,您可以使用本网站.

^[1]使用class[attr=class]

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

要么

^[2]使用tag[attr=class]

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

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

需要注意的是上面的选择,^[1]将所有元素 width,以400px具有class的input-large和选择的情况下,^[2] ,它将设置width到400px为所有input有内容class的input-large,所以如果你愿意,你可以调用多个类,即.class.class对input标签和使用下面的选择器..

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

因此,这将选择具有这两个类设置的任何元素,如果您想要更具体,并且只想设置,input type="text"那么您总是可以编写更具体的选择器,如

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

因此上述一个将只定位到input元素,其type属性保持value的text 与具有两个类,即.input-large .input-large-altered

演示

演示2

演示3(多个班级)

Answer 2

AFAIK你刚刚在bootstrap之后放了你自己的定制css

例:

... 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 ...

对不起,我忘了删除!important 的!important不需要