Frage an twitter-bootstrap – So zeigen Sie eine Liste inline mit Twitter's Bootstrap an

212

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

Deine Antwort

9   die antwort
15

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

.inli,ne li {
    display: inline;
}
-1

Inline ist eigentlich nicht das Inline, das wir möglicherweise benötigen - d. H. Display: inline

Bootstrap Inline ist meines Erachtens 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

32

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

Bootstrap 7 <ul class = "ungeordnete-Liste-inline-horizontal-flach-oneline"> Anthony Tsang
sieht aus, es wird länger und länger. Anthony Tsang
509

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

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

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>
40

Die Antwort von TheBrent ist zwar im Allgemeinen richtig, sie beantwortet jedoch nicht die Frage, wie dies auf die offizielle Bootstrap-Art und 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/

Möglicherweise verwenden Sie eine alte Version von Bootstrap. Die Bootstrap-Dokumente zeigen deutlich, dass dies das Markup ist. coneybeare
Die Coneybeares-Lösung ist die Bootstrap-spezifische Version und beantwortet die gestellte Frage. Aber es ist das Internet und nicht alles ist so schwarz und weiß, wie wir es gerne hätten. Welche Lösung Sie auch immer brauchen, um Zeit zu sparen, ist die, die ich verwenden würde. Wenn einer nicht funktioniert, probieren Sie den anderen und fahren Sie fort. TheBrent
Die @ Coneybeare-Lösung ist einfach die Bootstrap2-Lösung. Deshalb funktioniert sie nicht, nicht mehr und nicht weniger! cl0udw4lk3r
@ Coneybeare aus irgendeinem Grund funktioniert es nicht. TheBrent-Lösung hat gut genug funktioniert :) Sushant Gupta
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 dieli Elemente, um Ihr Problem wie folgt zu lösen

    { display: inline-block; }

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

    nav ul li { display: inline-block; }
-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 scheinbar CSS fehlt, das auf die Klasse 'inline' verweist. Fügen Sie Ihrer CSS-Datei daher zusätzlich die folgenden Zeilen hinzu, damit sie funktioniert:

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

Ich war erstaunt, dass list-inline in Bootstrap 4 nicht funktioniert hat und habe es dann endlich in der Bootstrap 4-Dokumentation bekommen.

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

Verwandte Fragen