web-dev-qa-db-fra.com

Comment afficher une liste en ligne à l'aide de Twitter Bootstrap

Je souhaite afficher une liste en ligne à l'aide de Bootstrap. Puis-je ajouter une classe à partir de Bootstrap pour y parvenir?

twitter-bootstrap
227
TheBrent

Bootstrap 2.3.2 

<ul class="inline">
  <li>...</li>
</ul>

Bootstrap 3 

<ul class="list-inline">
  <li>...</li>
</ul>

Bootstrap 4 

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

source: http://v4-alpha.getbootstrap.com/content/typography/#inline

548
Pablo

Selon la documentation Bootstrap de 2.3.2 et 3, la classe devrait être définie comme suit:

Bootstrap 2.3.2

<ul class="inline">
  <li>...</li>
</ul>

Bootstrap

<ul class="list-inline">
  <li>...</li>
</ul>
57
Raymond Yip

Bien que la réponse de TheBrent soit vraie en général, cela ne répond pas à la question de savoir comment le faire de manière officielle bootstrap. Le balisage pour bootstrap est simple:

<ul class="inline">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

Source

http://jsfiddle.net/MgcDU/4602/

41
coneybeare

Pour compléter la réponse de Raymond

Bootstrap 2.3.2 

<ul class="inline">
  <li>...</li>
</ul>

Bootstrap 3 

<ul class="list-inline">
  <li>...</li>
</ul>

Bootstrap 4 

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

source: http://v4-alpha.getbootstrap.com/content/typography/#inline

32
ArnaudR

Je n'ai rien trouvé de spécifique dans le fichier bootstrap.css. J'ai donc ajouté le fichier css à un fichier css personnalisé.

.inline li {
    display: inline;
}
15
TheBrent

J'ai été surpris, la liste en ligne ne fonctionnait pas dans bootstrap 4, puis finalement je l'ai eu dans la documentation bootstrap 4.

Bootstrap 3 et 4 

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

Source: http://v4-alpha.getbootstrap.com/content/typography/#inline

8
Sabir Hussain

Cette solution fonctionne avec Bootstrap v2, mais dans TBS3, la classe INLINE. Je n'ai pas compris quelle est la classe équivalente (s'il en existe une) dans TBS3.

Ce monsieur avait un très bon article sur les différences entre v2 et v3.

http://mattduchek.com/differences-between-bootstrap-v2-3-and-v3-0/

EDIT - utilisez CSS pour cibler les éléments li afin de résoudre votre problème comme ci-dessous

    { display: inline-block; }

Dans ma situation, je visais l’UL, au lieu de la LI

    nav ul li { display: inline-block; }
1
Craig London