web-dev-qa-db-fra.com

Comment créer une liste ordonnée avec un composant Twitter Bootstrap?

J'ai une liste simple, super facile:

http://www.bootply.com/P8wglPiSVD

Ressemble à ça:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <ol class="list-group">
                <li class="list-group-item">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, aliquid.</p>
                </li>
                <li class="list-group-item">
                    <p>Quos nostrum provident ex quisquam aliquid, hic odio repellendus atque.</p>
                </li>
                <li class="list-group-item">
                    <p>Facilis, id dolorum distinctio, harum accusantium atque explicabo quidem consectetur.</p>
                </li>
            </ol>
        </div>
    </div>
</div>

Mais le bootstrap de Twitter n’affiche aucun chiffre, même s’il s’agit d’une liste ordonnée.

J'ai cherché mais je n'ai trouvé aucun composant Twitter qui indique le style des éléments commandés et cela me rend curieux. Est-ce qu'il manque un style prédéfini pour Twitter Bootstrap pour les listes ordonnées ou est-ce qu'il me manque quelque chose?

Sincères amitiés,

George

htmlcsstwitter-bootstrap
13
LoveAndHappiness

Bootstrap applique display: block aux éléments de la liste, ce qui supprime la numérotation. Ajoutez ceci à votre CSS:

.list-group-item {
    display: list-item;
}

http://www.bootply.com/ZHQBWK9sHB

10
Steve Sanders

En combinant les réponses @Steve Sanders et @beiping_troop, vous pouvez créer des groupes de listes ordonnées propres avec le code CSS suivant:

.list-group {
    list-style: decimal inside;
}

.list-group-item {
    display: list-item;
}

http://www.bootply.com/BJadu6Ja6R

21
inostia

Pour seulement une liste ordonnée, j'ai choisi une substitution de style en ligne puisque je n'appelais qu'une liste numérotée à un endroit. Cela rendit bien:

<ol style="list-style: decimal inside;">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

Ma référence était à l'origine ici: Bootstrap: les numéros de la liste ordonnée disparaissent lors de l'utilisation d'un objet multimédia

2
beiping_troop

Le style CSS manuel peut être remplacé par le CSS d'amorçage, pour forcer le style ci-dessus à mettre! Important après la valeur

.list-group {
    list-style: decimal inside !important
}

.list-group-item {
    display: list-item !important
}
1
Jayant

J'ai trouvé une meilleure solution consiste à ajouter une nouvelle classe CSS au groupe de listes en fonction du style de numérotation souhaité. Par exemple, "list-group-numbered" ou "list-group-alpha" afin que vous puissiez ajouter la numérotation à les listes ordonnées que vous souhaitez ajouter et non à toutes les listes numérotées, en particulier si vous avez quelque part sur le site Web qui a des listes numérotées qui semblent maintenant incorrectes ...

.list-group-numbered { list-style: decimal inside; }
.list-group-alpha { list-style: lower-alpha inside; }
.list-group-roman { list-style: lower-roman inside; }
.list-group-alpha >li, .list-group-numbered >li { display: list-item }

alors vous pouvez mettre ce qui suit en html ..

<ol class="list-group list-group-numbered">
    <li class="list-group-item">an item
        <ol class="list-group list-group-alpha">
            <li class="list-group-item">a sub item
                <ol class="list-group list-group-roman">
                    <li class="list-group-item">a sub-sub item</li>
                </ol>                
            </li>
        </ol>
    </li>
    <li class="list-group-item">another item</li>        
    <li class="list-group-item">a third item</li>
</ol>
1
user1784974