Une largeur parfaite de 100% du conteneur parent pour une entrée Bootstrap?

Question

Comment puis-je faire un Bootstrap champ de saisie soit exactement 100%, aussi vaste que son parent?

Comme steve-obrien a écrit dans le Bootstrap Question n ° 1058:

Une valeur de 100% ne fonctionne pas lorsqu'il est appliqué directement à une entrée de champ qu'il ne prend pas en compte la marge. Si vous vous retrouvez avec 100% du contenant le plus de rembourrage dans la zone de saisie, de sorte que la zone de saisie de la casse d'habitude à l'extérieur de son conteneur.

Ce billet propose différentes solutions, mais je suis à la recherche de la meilleure façon de le faire -- de préférence une classe CSS déjà fournis par Bootstrap.

Answer 1

L'application de la classe input-block-level me convient parfaitement, quelle que soit la largeur de l'écran. Il est défini par Bootstrap en mixins.less comme suit:

 // Block level inputs
.input-block-level {
  display: block;
  width: 100%;
  min-height: 28px;        // Make inputs at least the height of their button counterpart
  .box-sizing(border-box); // Makes inputs behave like true block-level elements
}
 

Cela ressemble beaucoup au style suggéré par 'assembler' dans son commentaire sur le n ° 1058 .

Answer 2

Il suffit d'ajouter une taille de boîte:

 input[type="text"] {
    box-sizing: border-box;
}
 

Answer 3

il suffit d'ajouter:

 width: 100% !important;