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

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

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

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>

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/

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

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

.inline li {
    display: inline;
}

Zaskoczyło mnie, że list-inline nie działa w bootstrap 4, ale w końcu mam 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

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; }

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

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;
}