Comment afficher une liste en ligne en utilisant Bootstrap de Twitter

237

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?

twitter-bootstrap

— TheBrent
source

578

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

— Pablo
source

2

Meilleure réponse en présentant des solutions à toutes les versions disponibles! Merci mon pote!

— mislavcimpersak

Pourquoi devient-il plus verbeux au fil du temps? Bootstrap ne se rend-il pas compte qu'ils fonctionnent dans la direction opposée de la simplicité?

— Pavel Komarov

58

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>

— Raymond Yip
source

41

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/

— coneybeare
source

1

@coneybeare pour une raison quelconque, cela ne fonctionne pas. La solution TheBrent a assez bien fonctionné :)

— Sushant Gupta

1

Vous utilisez peut-être une ancienne version de bootstrap. Les documents bootstrap montrent clairement qu'il s'agit du balisage.

— coneybeare

2

La solution Coneybeares est la version spécifique au bootstrap et répond à la question posée. Mais, son Web et tout n'est pas aussi noir et blanc que nous le souhaiterions, donc quelle que soit la solution qui vous fait gagner du temps, c'est celle que j'utiliserais. Si l'un ne fonctionne pas, essayez l'autre et continuez.

— TheBrent

4

la solution @coneybeare est tout simplement la solution bootstrap2, c'est pourquoi ça ne marche pas, rien de plus, rien de moins!

— cl0udw4lk3r

34

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

— ArnaudR
source

4

regarde, ça s'allonge de plus en plus.

— Anthony Tsang

10

Bootstrap 7 <ul class = "unordered-list-inline-horizontal-flat-oneline">

— Anthony Tsang

15

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;
}

— TheBrent
source

9

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

— Sabir Hussain
source

1

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; }

— Craig London
source

-1

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

— Ian Warner
source

-1

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;
}

— Georg
source