Comment puis-je remplacer le formulaire de contrôle de la classe dans le Bootstrap 3 avec une classe personnalisée?

Je suis en train de remplacer la largeur dans le formulaire de contrôle de la classe de Bootstrap 3.

Extrait de:

<div class="col-xs-2">
         <label for="input-lastname" class="">Last Name</label>
         <input type="text" name="lastname" class="form-control my-form-inline" id="input-lastname" value="<?php  echo isset($_GET['lastname']) ? $_GET['lastname'] : 'empty';  ?>">
</div>...

J'ai ceci:

.form-control {
    min-width: 0;
    width: 25px;
    color:red;
}

width ne fonctionne jamais, mais la color:red. En utilisant les outils de développement de Chrome, je vois où .form-control .form-inline ont width:auto. Dès que j'ai décocher width dans ces classes, je reçois ma classe personnalisée.

J'ai mon css personnalisé comme le dernier fichier chargé, de sorte que l'ordre doit être juste.

J'ai essayé:

.form-control, .my-form-inline {
    min-width: 0;
    width: 25px;
    color:red;
}

.form-control {
    min-width: 0;
    width: 25px;
    color:red;
}

.form-control, .form-inline, .my-form-inline{
    min-width: 0;
    width: 25px;
    color:red;
}

Je semble être en mesure de remplacer tout, mais la largeur. Mon formulaire est form-inline.

J'ai essayé de mettre les contrôles de formulaire dans un div avec col-md-2 (et xs), mais il semble que pour influer sur l'étiquette, pas de l'entrée. Je ne peut jamais remplacer la width:auto sauf si je le fais de manière intégrée sur le contrôle dans le code HTML. Retrait de la form-control classe me permet aussi, comme prévu, pour obtenir ma classe personnalisée.

EDIT: Pour quelque raison que ce soit, les formes.moins mixin est en train de gagner sur le style, j'ai charger la dernière.

EDIT: Le problème a à voir avec mon spécificité vs Bootstrap. J'ai cette inline dans l'en-tête:

@media (min-width: 768px) {

    .form-inline .form-control {
      display: inline-block;
      width: auto;
      vertical-align: middle;
    }

    .my-form-inline
    {
        min-width: 0;
        width: 25px;
        color:red;
    }
}

Mais la largeur est toujours remplacée par une certaine spécificité, je ne trouve pas.

Votre code fonctionne très bien bootply.com/FKR6JrpWJj en supposant que vous êtes le chargement de votre CSS après le Bootstrap CSS
J'ai vérifié mon css personnalisé charges dernière dans google Chrome. Il les montre sous tout le reste, mais le Bootstrap est primordial de tout. Je dois être à côté de la charge de la séquence de quelque part. Edit: j'ai également chargé avec des <style>, et il n'est toujours pas battu d'Amorçage.
Chrome serait montrer vos styles _above_the d'autres dans l'élément de l'inspecteur, s'ils ont été chargés après
Il n'a pas. J'ai voulu comprendre pourquoi.

OriginalL'auteur johnny | 2015-06-08