Cómo mostrar una lista en línea usando Bootstrap de Twitter

237

Quiero mostrar una lista en línea usando Bootstrap. ¿Hay alguna clase que pueda agregar desde Bootstrap para lograr esto?

twitter-bootstrap

— TheBrent
fuente

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>

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

Enlace actualizado https://getbootstrap.com/docs/4.4/content/typography/#inline

— Pablo
fuente

2

¡La mejor respuesta por presentar soluciones a todas las versiones disponibles! ¡Gracias amigo!

— mislavcimpersak

¿Por qué se vuelve más detallado con el tiempo? ¿Bootstrap no se da cuenta de que están corriendo en la dirección opuesta de la simplicidad?

— Pavel Komarov

58

De acuerdo con la documentación de Bootstrap de 2.3.2 y 3, la clase debe definirse así:

Bootstrap 2.3.2

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

Bootstrap 3

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

— Raymond Yip
fuente

41

Si bien la respuesta de TheBrent es cierta en general, no responde a la pregunta de cómo hacerlo de la manera oficial. El marcado para bootstrap es simple:

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

Fuente

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

— coneybeare
fuente

1

@coneybeare por alguna razón no está funcionando. La solución de TheBrent funcionó bastante bien :)

— Sushant Gupta

1

Quizás estés usando una versión antigua de bootstrap. Los documentos de bootstrap muestran claramente que este es el marcado.

— coneybeare

2

La solución de Coneybeares es la versión específica de bootstrap y responde a la pregunta formulada. Pero, es la web y todo no es tan blanco y negro como nos gustaría, así que cualquier solución que le ahorre tiempo es la que usaría. Si uno no funciona, intente con el otro y siga adelante.

— TheBrent

44

la solución @coneybeare es simplemente la solución bootstrap2, por eso no funciona, ¡nada más y nada menos!

— cl0udw4lk3r

34

Para completar la respuesta 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>

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

— ArnaudR
fuente

44

mira, se hace más y más largo.

— Anthony Tsang

10

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

— Anthony Tsang el

15

No pude encontrar nada específico dentro del archivo bootstrap.css. Entonces, agregué el CSS a un archivo CSS personalizado.

.inline li {
    display: inline;
}

— TheBrent
fuente

9

Me sorprendió, list-inline no funcionaba en bootstrap 4 y finalmente lo obtuve en la documentación de bootstrap 4.

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

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

— Sabir Hussain
fuente

1

Esta solución funciona con Bootstrap v2, sin embargo, en TBS3 la clase INLINE. No he descubierto cuál es la clase equivalente (si hay una) en TBS3.

Este caballero tenía un artículo bastante bueno sobre las diferencias entre v2 y v3.

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

EDITAR: use CSS para apuntar a los lielementos para resolver su problema de la siguiente manera

    { display: inline-block; }

En mi situación, estaba apuntando a la UL, en lugar de la LI

    nav ul li { display: inline-block; }

— Craig London
fuente

-1

Inline no es realmente el inline que podemos necesitar, es decir, display: inline

Bootstrap en línea hasta donde yo observo es más una orientación horizontal

Para mostrar la lista en línea con otros elementos, entonces necesitamos

display: inline; added to the UL

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

NB // Añadir a la hoja de estilo

— Ian Warner
fuente

-1

De acuerdo con la documentación de Bootstrap, debe agregar la clase 'en línea' a su lista; Me gusta esto:

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

Sin embargo, esto no funciona ya que parece que falta un poco de CSS en el archivo CSS de Bootstrap que se refiere a la clase 'en línea'. Además, agregue las siguientes líneas a su archivo CSS para que funcione:

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

— Georg
fuente