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

237

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

twitter-bootstrap

— TheBrent
quelle

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>

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

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

— Pablo
quelle

2

Beste Antwort, weil Lösungen für alle verfügbaren Versionen präsentiert werden! Danke Kumpel!

— mislavcimpersak

Warum wird es mit der Zeit ausführlicher? Erkennt Bootstrap nicht, dass sie in die entgegengesetzte Richtung der Einfachheit laufen?

— Pavel Komarov

58

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>

— Raymond Yip
quelle

41

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/

— coneybeare
quelle

1

@coneybeare aus irgendeinem Grund funktioniert es nicht. Die Brent-Lösung hat gut genug funktioniert :)

— Sushant Gupta

1

Vielleicht verwenden Sie eine alte Version von Bootstrap. Die Bootstrap-Dokumente zeigen deutlich, dass dies das Markup ist.

— Coneybeare

2

Die Coneybeares-Lösung ist die Bootstrap-spezifische Version und beantwortet die gestellte Frage. Aber es ist das Web und alles ist nicht so schwarz und weiß, wie wir es gerne hätten. Jede Lösung spart Ihnen Zeit, die ich verwenden würde. Wenn einer nicht funktioniert, versuchen Sie es mit dem anderen und fahren Sie fort.

— TheBrent

4

Die @ coneybeare-Lösung ist einfach die Bootstrap2-Lösung. Deshalb funktioniert sie nicht, nicht mehr und nicht weniger!

— Cl0udw4lk3r

34

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

— ArnaudR
quelle

4

sieht aus, es wird immer länger.

— Anthony Tsang

10

Bootstrap 7 <ul class = "ungeordnete-Liste-Inline-horizontal-flach-online">

— Anthony Tsang

15

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

— TheBrent
quelle

9

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

— Sabir Hussain
quelle

1

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

— Craig London
quelle

-1

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

— Ian Warner
quelle

-1

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

— Georg
quelle