Jak wyświetlić listę bezpośrednio za pomocą Bootstrap na Twitterze


237

Chcę wyświetlić listę wbudowaną za pomocą Bootstrap. Czy istnieje klasa, którą mogę dodać z Bootstrap, aby to osiągnąć?

Odpowiedzi:


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>

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

Zaktualizowany link https://getbootstrap.com/docs/4.4/content/typography/#inline


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

Dlaczego z czasem robi się bardziej gadatliwy? Czy Bootstrap nie zdaje sobie sprawy, że biegną one w przeciwnym kierunku niż prostota?
Pavel Komarov

58

Zgodnie z dokumentacją Bootstrap 2.3.2 i 3, klasę należy zdefiniować następująco:

Bootstrap 2.3.2

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

Bootstrap 3

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

41

Chociaż odpowiedź TheBrenta jest prawdziwa, nie odpowiada ona na pytanie, jak to zrobić w oficjalny sposób bootstrap. Znaczniki bootstrap są proste:

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

Źródło

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


1
@coneybeare z jakiegoś powodu to nie działa. Rozwiązanie TheBrent działało wystarczająco dobrze :)
Sushant Gupta

1
Być może używasz starożytnej wersji bootstrap. Dokumenty bootstrap wyraźnie pokazują, że jest to znacznik.
coneybeare

2
Rozwiązanie Coneybeares to wersja specyficzna dla bootstrapu i odpowiada na zadane pytanie. Ale to jest sieć i wszystko nie jest tak czarno-białe, jak byśmy tego chcieli, więc każde rozwiązanie oszczędza czas, tego właśnie użyłbym. Jeśli jedno nie działa, spróbuj drugiego i przejdź dalej.
TheBrent

4
rozwiązanie @coneybeare jest po prostu rozwiązaniem bootstrap2, dlatego nie działa, nic więcej, nic mniej!
cl0udw4lk3r

34

Aby wypełnić odpowiedź Raymonda

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


4
wygląda, robi się coraz dłużej.
Anthony Tsang

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

15

Nie mogłem znaleźć niczego konkretnego w pliku bootstrap.css. Dodałem więc css do niestandardowego pliku css.

.inline li {
    display: inline;
}


1

To rozwiązanie działa przy użyciu Bootstrap v2, jednak w TBS3 jest klasa INLINE. Nie zorientowałem się, jaka jest klasa równoważna (jeśli taka istnieje) w TBS3.

Ten dżentelmen miał całkiem niezły artykuł na temat różnic między wersją v2 i v3.

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

EDYCJA - użyj CSS, aby celować w lielementy, aby rozwiązać problem, jak poniżej

    { display: inline-block; }

W mojej sytuacji celowałem w UL zamiast w LI

    nav ul li { display: inline-block; }

-1

Inline nie jest w rzeczywistości tym, czego możemy potrzebować - tj. Display: inline

Bootstrap w linii, o ile obserwuję, jest bardziej orientacją poziomą

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

display: inline; added to the UL

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

NB // Dodaj do arkusza stylów


-1

Zgodnie z dokumentacją Bootstrap, musisz dodać klasę „inline” do swojej listy; lubię to:

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

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

ul.inline > li, ol.inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.