Pergunta sobre twitter-bootstrap – Como exibir uma lista inline usando o Bootstrap do Twitter

212

Eu quero exibir uma lista inline usando o Bootstrap. Existe uma classe que eu possa adicionar do Bootstrap para conseguir isso?

Sua resposta

9   a resposta
15

. Então, adicionei o css a um arquivo css personalizado.

.inli,ne li {
    display: inline;
}
-1

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 faltando no arquivo CSS do Bootstrap referente à classe 'inline'. Então, além disso, adicione as seguintes linhas ao seu arquivo CSS para que ele funcione:

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

ela não responde à questão de como fazê-lo no modo de bootstrap oficial. 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/

Talvez você esteja usando uma versão antiga do bootstrap. Os documentos do bootstrap mostram claramente que esta é a marcação. coneybeare
A solução @coneybeare é simplesmente a solução bootstrap2, é por isso que não está funcionando, nada mais, nada menos! cl0udw4lk3r
@ Moneybeare por algum motivo, não está funcionando. A solução TheBrent funcionou bem o suficiente :) Sushant Gupta
A solução Coneybeares é a versão específica do bootstrap e responde a pergunta feita. Mas, é a web e tudo não é tão preto e branco como gostaríamos, por isso, qualquer que seja a solução que você economiza tempo que é o que eu usaria. Se não funcionar, tente o outro e siga em frente. TheBrent
32

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

olha, fica mais e mais longo. Anthony Tsang
Bootstrap 7 <ul classe = "unordered-list-line-horizontal-flat-oneline"> Anthony Tsang
-1

display: inline

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

Para exibir a lista em linha com outros elementos, então precisamos

display: inline; added to the UL

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

NB // Adicionar à folha de estilo

509

Bootstrap 2.3.2

  <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

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

list-inline 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

56

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>
1

porém no TBS3 a classe INLINE. Eu não descobri o que é 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 segmentar oli elementos 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; }

Perguntas relacionadas