Personnalisation de fichier de démarrage: désactivé bouton principal de la frontière

Je suis en utilisant le Bootstrap modèle de personnalisation de générateur pour changer les couleurs des états par défaut et les boutons à l'aide de leur.

J'ai changé tous les états correctement, mais lors de la génération d'un bouton de groupe et à l'aide d'un bouton principal avec l'état désactivé, il est encore générer une bordure bleue dont je n'arrive pas à trouver l'option à modifier dans le Bootstrap du générateur. Code:

<a href="#" class="btn btn-primary disabled">
    <strong>Title here</strong>
    <br><small>Hello world!</small>
</a>

C'est la génération de ce (note la lumière de la frontière par rapport à la touche sur la gauche qui a une bordure noire parce qu'il n'est pas désactivé):

Personnalisation de fichier de démarrage: désactivé bouton principal de la frontière

L'inspection de l'élément montre ceci:

.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover, .btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, 
.btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active, .btn-primary[disabled]:active, 
fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, 
.btn-primary[disabled].active, fieldset[disabled] .btn-primary.active {
    background-color: #428bca; 
    border-color: #357ebd;            /* these are light blue colours */
}

Je n'arrive pas à trouver n'importe où dans le générateur de modèle qui fait référence à @btn-primary-disabled-border ou des variations similaires de que. J'ai regardé à travers toutes les références à disabled dans la page et il ne semble pas à référencer.

Ai-je raté quelque chose quelque part ou ce besoin d'être un manuel de CSS remplacer? J'aimerais bien garder cela à l'aide de Bootstrap est MOINS compilateur si possible.

Edit: voici un violon et voici un lien vers mon Bootstrap définitions

  • le site est-il vivre? serait plus facile si nous pouvions regarder votre css
  • Ont ajouté un violon
  • Selon les sources (1 -> 2], les handicapés bouton principal de la frontière est définie à @btn-primary-border la valeur tout en permis est darken(@btn-primary-border, 12%). Donc oui, si vous avez besoin de rompre ce lien, vous aurez besoin d'un manuel CSS remplacent.
  • merci pour cela. Je ne suis pas tout à fait comprendre comment je suis arriver un briquet à la frontière à la recherche par le biais de la MOINS variables dans mon Bootstrap de configuration et de voir qu'ils sont mis plus ou moins par défaut, avec mon @brand-primary ensemble de #177DA0
  • Oui, je vois maintenant, ces couleurs sont apparemment incorrect - la chose étrange est que quand je compile et télécharger les définitions que vous avez lié à ça me donne de bonnes couleurs (#177da0/#146c8a) - et non pas ceux #428bca/#357ebd que dans votre CSS. Essayez de recompiler/retélécharger? (peut-être vous êtes juste en utilisant certains mal "en cache" zip à partir d'expériences antérieures?).
  • ouais vous avez peut-être raison... je vais essayer
  • Ne semble pas changer malheureusement... pouvez-vous mettre le CSS que vous obtenez qui est correct dans mon violon?
  • Ah, je vois quel est le problème maintenant, vous êtes à l'aide de bootstrap-theme.css mais bootstrap.css devrait être utilisé à la place. (Honnêtement, je n'ai jamais su qu'est-ce que la magie "bootstrap thème" les fichiers sont en train de faire là et ce qu'ils sont là pour tous. Probablement la personnalisation est censé produire correcte "à thème" fichiers trop, mais apparemment il ne fonctionne pas).
  • endroit agréable. En utilisant bootstrap.css correctement fixer les frontières, comme spécifié dans la configuration, mais il perd également d'autres caractéristiques du fichier de thème par exemple bouton de gradients. Que le violon que tu viens de poster affiche toujours de la lumière bleue de la frontière...? Ceci est un violon sans l'aide de la -theme.css fichier
  • OK, à corriger moi-même, j'ai regardé les sources et il semble que bootstrap-theme.css est censé être toujours utilisé avec bootstrap.css - jamais seul (enfin, c'est la façon dont ils le montrent dans les docs). Le theme.less ne définit pas la border-color pour les personnes handicapées etat touche à tout. Maintenant, puisque vous utilisez uniquement bootstrap-theme.css mais également la valeur par défaut bootstrap.min.css externe de violon de ressources, de celles de la frontière couleurs sont définies par défaut Bootstrap schéma de couleur. En d'autres termes, pour obtenir ce droit, vous devez mettre les deux bootstrap.css et bootstrap-theme.css dans le violon.
  • Corrigé de violon: jsfiddle.net/seven_phases_max/GDx9d (n'a pas l'air bon, enfin si il semble que vous aurez toujours besoin de certains manuels d'CSS fine-tuning 🙂
  • votre violon semble beaucoup mieux... je suppose que, dans mon projet que depuis que je l'ai seulement été dont le thème fichier CSS qui explique peut-être pourquoi il est apparu? Mettez dans une réponse. Cheers

InformationsquelleAutor Robbie Averill | 2014-07-08
  1. 4

    Supprimer la bordure transparente à la propriété à partir de votre .btn classe comme ci-dessous.

     .btn{
  border:0px solid transparent; /* this was 1px earlier */
 }

    DÉMO

    • Salut Suresh, cela supprime la frontière complètement ce qui signifie que vous ne pouvez pas voir le bord des boutons. Aussi le dégradé d'arrière-plan est perdu... je suis à la recherche d'un option si possible
    • ok. j'ai mis à jour ma réponse avec la démo de violon. check it out.
    • Hey Suresh, vous êtes encore en train de perdre le contour du bouton complètement - si j'ai 8 de ces unes à côté des autres, je veux distinguer les bords de chaque bouton...
    InformationsquelleAutor Suresh Ponnukalai