So zeigen Sie eine Liste inline mit dem Bootstrap von Twitter an

Ich möchte eine Liste inline mit Bootstrap anzeigen. Gibt es eine Klasse, die ich von Bootstrap hinzufügen kann, um dies zu erreichen?

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>

Quelle: http://v4-alpha.getbootstrap.com/content/typography/#inline

Aktualisierter Link https://getbootstrap.com/docs/4.4/content/typography/#inline

Gemäß der Bootstrap-Dokumentation von 2.3.2 und 3 sollte die Klasse folgendermaßen definiert werden:

Bootstrap 2.3.2

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

Bootstrap 3

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

Während die Antwort von TheBrent im Allgemeinen wahr ist, beantwortet sie nicht die Frage, wie dies auf offizielle Bootstrap-Weise geschehen soll. Das Markup für Bootstrap ist einfach:

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

Quelle

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

Um die Antwort von Raymond zu vervollständigen

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>

Quelle: http://v4-alpha.getbootstrap.com/content/typography/#inline

Ich konnte in der Datei bootstrap.css nichts Bestimmtes finden. Also habe ich das CSS zu einer benutzerdefinierten CSS-Datei hinzugefügt.

.inline li {
    display: inline;
}

Ich war erstaunt, List-Inline funktionierte nicht in Bootstrap 4, dann bekam ich es endlich in der Bootstrap 4-Dokumentation.

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

Quelle: http://v4-alpha.getbootstrap.com/content/typography/#inline

Diese Lösung funktioniert mit Bootstrap v2, in TBS3 jedoch mit der Klasse INLINE. Ich habe nicht herausgefunden, welche Klasse in TBS3 gleichwertig ist (falls es eine gibt).

Dieser Herr hatte einen ziemlich guten Artikel über die Unterschiede zwischen v2 und v3.

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

BEARBEITEN - Verwenden Sie CSS, um die liElemente zur Lösung Ihres Problems wie folgt auszurichten

    { display: inline-block; }

In meiner Situation zielte ich auf die UL anstatt auf die LI

    nav ul li { display: inline-block; }

Inline ist nicht die Inline, die wir möglicherweise benötigen - dh Anzeige: Inline

Bootstrap Inline ist für mich eher eine horizontale Ausrichtung

Um die Liste inline mit anderen Elementen anzuzeigen, benötigen wir

display: inline; added to the UL

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

NB // Zum Stylesheet hinzufügen

Gemäß der Bootstrap-Dokumentation müssen Sie die Klasse 'inline' zu Ihrer Liste hinzufügen. so was:

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

Dies funktioniert jedoch nicht, da in der Bootstrap-CSS-Datei, die auf die Klasse 'inline' verweist, anscheinend CSS fehlt. Fügen Sie Ihrer CSS-Datei außerdem die folgenden Zeilen hinzu, damit sie funktioniert:

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