Odpowiedzi:
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>
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
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 li
elementy, 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;
}