Come visualizzare un elenco in linea utilizzando Bootstrap di Twitter

237

Voglio visualizzare un elenco in linea usando Bootstrap. C'è una classe che posso aggiungere da Bootstrap per raggiungere questo obiettivo?

twitter-bootstrap

— TheBrent
fonte

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>

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

Link aggiornato https://getbootstrap.com/docs/4.4/content/typography/#inline

— Pablo
fonte

2

La migliore risposta perché presenta soluzioni a tutte le versioni disponibili! Grazie compagno!

— mislavcimpersak,

Perché diventa più dettagliato nel tempo? Bootstrap non si rende conto che stanno correndo nella direzione opposta alla semplicità?

— Pavel Komarov il

58

Secondo la documentazione Bootstrap di 2.3.2 e 3, la classe dovrebbe essere definita in questo modo:

Bootstrap 2.3.2

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

Bootstrap 3

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

— Raymond Yip
fonte

41

Mentre la risposta di TheBrent è vera in generale, non risponde alla domanda su come farlo nel modo bootstrap ufficiale. Il markup per bootstrap è semplice:

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

fonte

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

— coneybeare
fonte

1

@coneybeare per qualche motivo non funziona. La soluzione Brent ha funzionato abbastanza bene :)

— Sushant Gupta,

1

Forse stai usando una versione antica di bootstrap. I documenti bootstrap mostrano chiaramente che questo è il markup.

— coneybeare,

2

La soluzione Coneybeares è la versione specifica del bootstrap e risponde alla domanda posta. Ma è il web e non tutto è in bianco e nero come vorremmo, quindi qualunque soluzione ti fa risparmiare tempo, quella che vorrei usare. Se uno non funziona, prova l'altro e vai avanti.

— TheBrent,

4

la soluzione @coneybeare è semplicemente la soluzione bootstrap2, ecco perché non funziona, niente di più, niente di meno!

— cl0udw4lk3r

34

Per completare la risposta di 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>

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

— ArnaudR
fonte

4

guarda, diventa sempre più lungo.

— Anthony Tsang,

10

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

— Anthony Tsang,

15

Non sono riuscito a trovare nulla di specifico nel file bootstrap.css. Quindi, ho aggiunto il CSS a un file CSS personalizzato.

.inline li {
    display: inline;
}

— TheBrent
fonte

9

Mi sono stupito, list-inline non funzionava in bootstrap 4 quindi alla fine l'ho preso nella documentazione di bootstrap 4.

Bootstrap 3 e 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>

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

— Sabir Hussain
fonte

1

Questa soluzione funziona utilizzando Bootstrap v2, tuttavia in TBS3 la classe INLINE. Non ho capito quale sia la classe equivalente (se ce n'è una) in TBS3.

Questo gentiluomo aveva un buon articolo sulle differenze tra v2 e v3.

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

MODIFICA: usa i CSS per indirizzare gli lielementi per risolvere il tuo problema come di seguito

    { display: inline-block; }

Nella mia situazione, stavo prendendo di mira la UL, anziché la LI

    nav ul li { display: inline-block; }

— Craig London
fonte

-1

Inline non è in realtà l'inline che forse potremmo richiedere, ad esempio display: inline

Bootstrap in linea per quanto riguarda l'osservatore ha più un orientamento orizzontale

Per visualizzare l'elenco in linea con altri elementi, è necessario

display: inline; added to the UL

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

NB // Aggiungi al foglio di stile

— Ian Warner
fonte

-1

Secondo la documentazione Bootstrap, è necessario aggiungere la classe "inline" all'elenco; come questo:

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

Tuttavia, questo non funziona poiché sembra che manchi qualche CSS nel file CSS Bootstrap che fa riferimento alla classe "inline". Inoltre, aggiungi le seguenti righe al tuo file CSS per farlo funzionare:

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

— Georg
fonte