Comment afficher une liste en ligne en utilisant Bootstrap de Twitter

Je souhaite afficher une liste en ligne à l'aide de Bootstrap. Existe-t-il une classe que je peux ajouter à partir de Bootstrap pour y parvenir?

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

Lien mis à jour https://getbootstrap.com/docs/4.4/content/typography/#inline

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

Bootstrap 2.3.2

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

Bootstrap 3

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

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

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

La source

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

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

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

.inline li {
    display: inline;
}

Je suis étonné, list-inline ne fonctionnait pas dans bootstrap 4, puis finalement je l'ai eu dans la documentation de 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

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

Ce monsieur avait un assez 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 liéléments pour résoudre votre problème comme ci-dessous

    { display: inline-block; }

Dans ma situation, je visais l'UL, au lieu du LI

    nav ul li { display: inline-block; }

Inline n'est pas réellement l'inline dont nous avons peut-être besoin - ie display: inline

Bootstrap en ligne pour autant que j'observateur est plus d'une orientation horizontale

Pour afficher la liste en ligne avec d'autres éléments, nous avons besoin

display: inline; added to the UL

<ul class="unstyled inline" style="display:inline">

NB // Ajouter à la feuille de style

Selon la documentation Bootstrap, vous devez ajouter la classe 'inline' à votre liste; comme ça:

<ul class="inline">
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ul>

Cependant, cela ne fonctionne pas car il semble y avoir du CSS manquant dans le fichier CSS Bootstrap faisant référence à la classe 'inline'. Donc, en plus, ajoutez les lignes suivantes à votre fichier CSS pour le faire fonctionner:

ul.inline > li, ol.inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}