Pytanie w sprawie twitter-bootstrap – Jak wyświetlić listę inline za pomocą Twitter Bootstrap

212

Chcę wyświetlić listę inline za pomocą Bootstrap. Czy istnieje możliwość dodania klasy z Bootstrap, aby to osiągnąć?

Twoja odpowiedź

9   odpowiedzi
56

klasa powinna być zdefiniowana w ten sposób:

Bootstrap 2.3.2

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

Bootstrap 3

<ul class="list-inline">
  <li>...</li>
</ul>
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>

źródło:http://v4-alpha.getbootstrap.com/content/typography/#inline

wygląda, robi się coraz dłużej. Anthony Tsang
Bootstrap 7 <ul class = "unordered-list-inline-horizontal-flat-oneline"> Anthony Tsang
8

list-inline nie działał w bootstrap 4, w końcu dostałem go w dokumentacji bootstrap 4.

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

Źródło: http://v4-alpha.getbootstrap.com/content/typography/#inline

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>

źródło:http://v4-alpha.getbootstrap.com/content/typography/#inline

Najlepsza odpowiedź dzięki prezentacji rozwiązań dla wszystkich dostępnych wersji! Dzięki stary! mislavcimpersak
15

css do niestandardowego pliku css.

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

lubię to:

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

Nie działa to jednak, ponieważ brakuje pliku CSS w pliku CSS Bootstrap odnoszącym się do klasy „inline”. Dodatkowo dodaj następujące linie do pliku CSS, aby działał:

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

jednak w TBS3 klasa INLINE. Nie zorientowałem się, jaka jest odpowiednia klasa (jeśli taka istnieje) w TBS3.

Ten pan miał całkiem niezły artykuł o różnicach między v2 a v3.

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

EDYCJA - użyj CSS, aby wycelowaćli elementy do rozwiązania problemu, jak poniżej

    { display: inline-block; }

W mojej sytuacji celowałem w UL, a nie w LI

    nav ul li { display: inline-block; }
-1

którego możemy wymagać - tzn. Display: inline

Bootstrap inline tak daleko, jak I obserwator jest bardziej orientacji poziomej

Aby wyświetlić listę w linii z innymi elementami, potrzebujemy

display: inline; added to the UL

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

NB // Dodaj do arkusza stylów

40

nie odpowiada na pytanie, jak to zrobić w oficjalny sposób. Znaczniki na bootstrap są proste:

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

Źródło

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

Może używasz starożytnej wersji bootstrapu. Dokumenty bootstrap wyraźnie pokazują, że jest to znacznik. coneybeare
@ Coneybeare z jakiegoś powodu nie działa. Rozwiązanie TheBrent działało wystarczająco dobrze :) Sushant Gupta
Rozwiązanie @coneybeare to po prostu rozwiązanie bootstrap2, dlatego nie działa, nic więcej, nic mniej! cl0udw4lk3r
Rozwiązanie Coneybeares jest wersją specyficzną dla bootstrapu i odpowiada na zadane pytanie. Ale jego sieć i wszystko nie jest tak czarno-białe, jak byśmy tego chcieli, więc jakiekolwiek rozwiązanie oszczędza czas, którego używałbym. Jeśli jeden nie działa, spróbuj drugiego i ruszaj dalej. TheBrent

Powiązane pytania