Como exibir uma lista em linha usando o Bootstrap do Twitter

237

Quero exibir uma lista em linha usando o Bootstrap. Existe uma classe que posso adicionar no Bootstrap para conseguir isso?

twitter-bootstrap

— TheBrent
fonte

577

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 atualizado https://getbootstrap.com/docs/4.4/content/typography/#inline

— Pablo
fonte

2

Melhor resposta por apresentar soluções para todas as versões disponíveis! Obrigado companheiro!

— mislavcimpersak

Por que fica mais detalhado com o tempo? O Bootstrap não percebe que eles estão correndo na direção oposta da simplicidade?

— Pavel Komarov 14/01

58

De acordo com a documentação do Bootstrap de 2.3.2 e 3, a classe deve ser definida assim:

Bootstrap 2.3.2

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

Bootstrap 3

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

— Raymond Yip
fonte

41

Embora a resposta do TheBrent seja verdadeira em geral, ela não responde à pergunta de como fazê-lo da maneira oficial de inicialização. A marcação para o bootstrap é simples:

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

Fonte

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

— coneybeare
fonte

1

@coneybeare, por algum motivo, não está funcionando. A solução TheBrent funcionou bem o suficiente :) #

— Sushant Gupta

1

Talvez você esteja usando uma versão antiga do bootstrap. Os documentos de inicialização mostram claramente que essa é a marcação.

— Coneybeare

2

A solução Coneybeares é a versão específica do bootstrap e responde à pergunta. Mas, é a Web e tudo não é tão preto e branco quanto gostaríamos, portanto, qualquer solução economiza seu tempo e é a que eu usaria. Se um não funcionar, tente o outro e siga em frente.

— TheBrent

4

a solução @coneybeare é simplesmente a solução bootstrap2, é por isso que não está funcionando, nada mais, nada menos!

— Cl0udw4lk3r

34

Para completar a resposta 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>

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

— ArnaudR
fonte

4

olha, fica mais e mais.

— Anthony Tsang

10

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

— Anthony Tsang

15

Não encontrei nada específico no arquivo bootstrap.css. Então, adicionei o css a um arquivo css personalizado.

.inline li {
    display: inline;
}

— TheBrent
fonte

9

Fiquei espantado, a lista em linha não estava funcionando no bootstrap 4 e, finalmente, consegui na documentação do 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

Esta solução funciona usando o Bootstrap v2, no entanto, no TBS3 a classe INLINE. Eu não descobri qual é a classe equivalente (se houver) no TBS3.

Este senhor teve um bom artigo das diferenças entre v2 e v3.

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

EDIT - use CSS para direcionar os lielementos para resolver o seu problema como abaixo

    { display: inline-block; }

Na minha situação, eu estava alvejando o UL, em vez do LI

    nav ul li { display: inline-block; }

— Craig London
fonte

-1

Inline não é realmente o inline que talvez exijamos - ou seja, display: inline

Bootstrap embutido, tanto quanto eu observador, é mais uma orientação horizontal

Para exibir a lista em linha com outros elementos, precisamos

display: inline; added to the UL

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

NB // Adicionar à folha de estilo

— Ian Warner
fonte

-1

De acordo com a documentação do Bootstrap, você precisa adicionar a classe 'inline' à sua lista; como isso:

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

No entanto, isso não funciona, pois parece haver algum CSS ausente no arquivo CSS do Bootstrap referente à classe 'inline'. Além disso, adicione as seguintes linhas ao seu arquivo CSS para fazê-lo funcionar:

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

— Georg
fonte