如何在不使用！important的情况下自定义twitter引导程序的各种输入大小？ [英] How do I customize twitter bootstrap's various input sizes without using !important?

问题描述

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

到目前为止，我只能使用！ 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/

解决方案

而不是使用！important ，您可以使用 属性选择器 这将覆盖默认值，因为它比使用 code>。与特异性概念不好？请参阅此文章。

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

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

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

或

^[2] 使用标签[attr = class]

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

并使用！important

---

注意，上面的选择器， [ 1] 会将所有元素 宽度改为 400px 在 [2] 的情况下，<$ c> class of input-large 全部输入 输入 width 至 400px 具有 class of input-large 的元素，因此如果需要，您可以调用多个类 > .class.class 在上输入标签并使用下面的选择器。

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

因此，这将选择任何这些类设置，如果你想要更具体，并且只想为 input type =text设置比你可以总是写一个更具体的选择器像





  input [type =text] input-large.input-large-altered {
 width：400px;因此，上面的只会定位到 。  code>的属性的值 c $ c> text   AND 具有 .input-large   .input -large-altered  
 
 
 
  演示  
 
 
 
  演示2   
 
 
 
  演示3  （多个类）
 
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)



So far I can only achieve this by using the !important hack to override the input css. I want to avoid using !important at all costs, because it is awful practice.

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 {
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 styling and not declaring !important?

Here's a fiddle: http://jsfiddle.net/xryQK/
解决方案
Instead of using !important, you can use an attribute selector which will override the default as it will be more specific than simply using a class. Not good with specificity concept? Refer this article.

For calculating the specificity of your selectors, you can use this website.

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

[2] Using tag[attr=class]
input[class="input-large"] {
    width: 400px;
}
And using !important is not an awful practice if you use it in the right place.



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;
}
So this will select any element 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-large.input-large-altered {
   width: 400px;
}
So the above one will only target to input element whose type attribute is holding a value of text AND having both the classes i.e .input-large .input-large-altered

Demo

Demo 2

Demo 3 (Multiple classes)

                        
这篇关于如何在不使用！important的情况下自定义twitter引导程序的各种输入大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！