Comment puis-je personnaliser twitter bootstrap différents entrée tailles, sans l'aide !- il important?

Question

Bootstrap est entrée tailles agrandir en largeur, tandis que les boutons de développer à la fois la hauteur et la taille de la police. (voir photo) je suis en train de personnaliser les entrées à se développer, la hauteur et la taille de la police ainsi. (Note: ils sommes en train de corriger cela pour la prochaine version, mais je suis trop impatient pour attendre)

Jusqu'à présent, je ne peut obtenir à l'aide de l' !important hack pour remplacer l'entrée du css. Je veux éviter d'utiliser des !important à tous les frais, parce que c'est horrible pratique.

Actuellement, c'est le code que j'ai pour l'expansion de la hauteur de l' .input-large. Il ne fonctionne pas quand j'enlève !important. Je suppose que c'est parce que les entrées sont une priorité plus élevée que les classes (que je trouve absolument ridicule, mais corrigez-moi si je me trompe).

.input-large {
width: 210px;
height: 44px !important;
margin-bottom: 10px !important;
line-height: 30px !important;
padding: 11px 19px !important;
font-size: 17.5px !important;
}

Est-il possible que je puisse réaliser ce sans enlever le défaut d'entrée de style et de ne pas déclarer !important?

Voici un violon: http://jsfiddle.net/xryQK/

Answer 1

Au lieu d'utiliser !important, vous pouvez utiliser un sélecteur d'attribut qui va remplacer la valeur par défaut, car il sera plus précis que d'utiliser simplement un class. Pas bon avec une spécificité de concept? Consultez cet article.

Pour le calcul de la spécificité de votre sélecteurs, vous pouvez utiliser ce site web.

^[1] à l'Aide de class[attr=class]

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

OU

^[2] à l'Aide de tag[attr=class]

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

Et à l'aide de !important n'est pas un horrible pratique si vous l'utilisez dans le bon endroit.

---

Remarque que ci-dessus sélecteurs, ^[1] fera tous les éléments width de 400px d'avoir un class de input-large et en cas de sélecteur ^[2], il sera mis en width de 400px pour tous input des éléments ayant class de input-large, donc si vous voulez, vous pouvez appeler plusieurs classes je.e .class.class sur input balise et utilisez le sélecteur ci-dessous..

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

Ce qui permettra de sélectionner tout élément de ces deux classes ensemble, si vous voulez être plus précis, et que vous voulez qu' input type="text" que vous pouvez toujours écrire, même un plus spécifiques comme sélecteur

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

Donc, ci-dessus, on aura seulement la cible d' input dont type attribut est la tenue d'un value de text ET ayant à la fois les classes je.e .input-large .input-large-altered

Démo

Démo 2

Démo 3 (Plusieurs classes)

Answer 2

Autant que je sache, il vous suffit de mettre votre propre personnalisé css après le démarrage de l'

exemple:

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

Désolé, j'ai oublié de supprimer l' !important L' !important n'est pas nécessaire

Answer 3

Si vous travaillez hors de l'amorçage .moins de fichiers

une solution simple serait d'ajouter une entrée supplémentaire comme:

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

dans votre code html

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