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

Question

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

到目前为止，我只能通过使用!important hack覆盖输入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

您可以使用 attribute selector 来覆盖默认设置，而不是简单地使用!important，而不是使用class。具体概念不好？请参阅this文章。

要计算选择器的特异性，您可以使用this网站。

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

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

OR

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

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

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

---

请注意，上面的选择器， ^[1] 会使所有元素 width到400px class {{} 1}}并且在选择器 ^[2] 的情况下，它将input-large设置为width 所有400px 元素{ {1}} 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 AND < / strong>同时拥有两个类value text

Demo

Demo 2

Demo 3（多个班级）

Answer 2

AFAIK你只需在引导程序之后放置自己定制的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

Answer 3

如果你正在使用bootstrap .less文件

一个简单的解决方案是添加一个额外的条目，如：

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

你的HTML中的

<form class="form-horizontal form-fatter">
...
</form>