31

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/

4

3 回答 3

31

除了使用!important，您可以使用属性选择器来覆盖默认值，因为它比简单地使用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具有classofinput-large并且在选择器[2]的情况下，它将设置width为具有of400px的所有input元素，因此如果需要，您可以调用多个类，即在标签上并使用下面的选择器..classinput-large.class.classinput

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

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

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

所以上面的将只针对其属性持有的元素input并且同时具有两个类，即typevaluetext .input-large .input-large-altered

演示

演示 2

演示 3（多类）

于 2012-12-24T14:38:41.177 回答
6

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

于 2012-12-24T14:44:53.480 回答
1

如果您正在使用引导程序 .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>
于 2013-07-22T08:18:03.647 回答