Groupe de la liste avec l'élément lié avec la couleur d'arrière-plan dans le bootstrap

De démarrage de la version: Bootstrap v3.0.0
En utilisant le bootstrap exemple pour bootstrap de groupe de la liste avec des articles liés:

   <div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

J'ai besoin de changer la couleur d'arrière-plan comme un Contextual classes

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>

Le truc de la partie c'est que je ne peut pas fusionner les deux exemples, et les combinaisons suivantes ne fonctionne pas:

<a href="#" class="list-group-item list-group-item-danger">

<a href="#" class="list-group-item bg-danger">

<a href="#" class="list-group-item danger">

Donc la question....

Est possible de changer cela avec classe de bootstrap, ou peut-être primordial peu de css?

Merci et salutations.

Mise à JOUR:
Proposition de réponse est de travailler sur le violon, mais pas dans mon code.
Démarrage de la version: Bootstrap v3.0.0
Le groupe est dans un panneau de contenu.

Groupe de la liste avec l'élément lié avec la couleur d'arrière-plan dans le bootstrap

Code complet:

            <div class="col-md-5">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="list-group">
  <a href="#" class="list-group-item">Cras justo odio</a>
  <a href="#" class="list-group-item list-group-item-danger">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-warning">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-success">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-info">Vestibulum at eros</a>
</div>
   </div>
                </div>
            </div>
C'est une déclaration avec un point d'interrogation à la fin. Essayez de définir quelle que soit la propriété vous choisissez la valeur de votre choix, suivi par !important
merci, désolé pour mon anglais

OriginalL'auteur MacGyver | 2016-02-25

  1. 3

    EDIT: ce qui suit ne fonctionne qu'avec Bootstrap v3.1.0+, si vous avez absolument besoin d'utiliser une ancienne version dont vous avez besoin pour l'utilisation de classes personnalisées et de style avec CSS.

    votre première combinaison fonctionne parfaitement.

    Assurez-vous que vous suivez la structure exacte du composant, dans votre cas List-Group avec les Éléments Liés qui a une structure du type :

    <div class="list-group">
    <a class="list-group-item"></a>
    <a class="list-group-item"></a>
    ...
</div>

    puis ajouter le style des classes pour les ancres <a>.

    En fin de compte, il devrait ressembler à ceci :

    <div class="list-group">
  <a href="#" class="list-group-item">Cras justo odio</a>
  <a href="#" class="list-group-item list-group-item-danger">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-warning">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-success">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-info">Vestibulum at eros</a>
</div>

    Veuillez consulter le violon qui montre ce travail : https://jsfiddle.net/bafforosso/whLhohew/

    mmmm.... laissez-moi voir... 🙁
    Je ne vois toujours pas les couleurs. Veuillez consulter ma mise à jour. Merci!
    Est le violon de travail sur votre navigateur? Si oui, avez-vous essayé de mise en miroir sur votre page?
    Oui. Je vais essayer de mettre à jour la version de bootstrap
    il ne fonctionne pas avec Bootstrap v3.0.0, voir l'exemple de jouer avec des 3.0.0 ici: jsfiddle.net/bafforosso/dzu5fymr Si vous voulez utiliser Bootstrap classes de style de ce que vous aurez besoin d'utiliser une version plus récente de Bootstrap. Sinon, vous aurez besoin de créer des classes personnalisées et de style en CSS

    OriginalL'auteur bafforosso