Supprimer rayon des frontières de la Liste sans écraser à l'échelle mondiale (Bootstrap 3)
Je suis en utilisant Bootstrap 3 pour créer une petite application. J'ai besoin d'utiliser leur liste liée, mais ne veulent pas les bords arrondis.
Du fichier CSS, ils utilisent les suivantes:
.list-group-item:first-child {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
Pour le moment, je remplace les classes en utilisant les suivantes:
.list-group-item:first-child {
border-top-right-radius: 0px !important;
border-top-left-radius: 0px !important;
}
.list-group-item:last-child {
border-bottom-right-radius: 0px !important;
border-bottom-left-radius: 0px !important;
}
Le problème avec ceci est que cela rend toutes les listes que j'ai rendu pas de frontières. Est-il possible de remplacer uniquement pour cette seule instance qui-je l'utiliser?
Voici un exemple de fichier d'amorce sur la façon de l'utiliser (http://getbootstrap.com/components/#list-group-linked):
<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>
sa simple | création d'une classe parent et de l'enfant de la classe, il va faire le remplacement de la classe parente avec l'élément spécifié dans elle aime
.parent > .list-group-item {color: blue;}
OriginalL'auteur TheAJ | 2013-11-20
Vous devez vous connecter pour publier un commentaire.
Pouvez-vous ajouter un nom de classe pour votre
list-group
commelist-special
? Utilisez ensuite...CSS
HTML
Démo: http://bootply.com/95585
EDIT: Il est généralement préférable de ne pas utiliser les CSS !important. Depuis le
list-special
fournit plus de précision, vous pouvez supprimer le!important
. J'ai mis à jour le Bootply de sorte que vous pouvez voir comment cela fonctionne.OriginalL'auteur Zim
Juste ajouter une classe supplémentaire pour votre div contenant.
et puis la cible via css:
EDIT:
Comme l'a demandé un bootply lien: bootply
rapide fyi: il continue à travailler avec bootstrap 4 (alpha), juste envelopper de votre
<ul></ul>
dans le div.OriginalL'auteur Sebsemillia
OriginalL'auteur AKID Ahmed