Wie mache ich rechts/links Icons/Textlisten in Bootstrap?

Ich bin eine alte Website auf eine ansprechende Website mit Bootstrap konvertieren möchte ich eine allgemeine Lösung zu finden, die alle alten Layout-Format umwandelt, die Tabellen verwendet, auf der linken Seite und Text auf der rechten Symbolen anzuzeigen.Wie mache ich rechts/links Icons/Textlisten in Bootstrap?

Also muss ich es Texte zeigen, unabhängig von der Länge neben Symbolen in einer Liste wie folgt aus:

Aber wenn die Breite zu klein wird, dann sollte es so zeigen:

Das Symbol kann entweder eine Grafik, ein Font Awesome-Zeichen oder ein Wort sein und sollte immer die gleiche Breite haben.

Aber die richtige Textbreite sollte in der Länge variieren können, und wickeln Sie aber bleiben auf der rechten Seite des Symbols links ausgerichtet.

Bisher habe ich dies:

<div class="row"> 
    <div class="col-xs-1">ICON</div> 
    <div class="col-xs-11">This is the longer text.</div> 
    <div class="clearfix"></div> 
    <div class="col-xs-1">ICON</div> 
    <div class="col-xs-11">This is another the longer text.</div> 
    <div class="clearfix"></div> 
</div>

Aber auf Breite "lg" es bricht:

Und auf Breite "xs" es wickelt unter:

Wie kann ich es so, dass:

Symbolspalte hat eine konstante Breite
Textspalte rechts von der Symbolspalte bleibt aber wickelt der Text nach Breite, aber behält ihre linken Rand für die Additionslinien
Textspalte immer fluchtend bleibt links zu Icon-Spalte

Quelle

2016-07-12 Edward Tanguay

Haben Sie im [Bootstrap Medienobjekt] sah (http://getbootstrap.com/components/#media)? – stackingjasoncooper

@stackingjasoncooper das ist die Antwort post, dass mit einem Beispiel :) – DaniP

Ja, DaniP, das ist ein Szenario, aber es gibt auch Listen, in denen z. Anstelle eines Symbols gibt es verschiedene Wörter wie "Ja", "Nein", "Vielleicht", die verschiedene Längen haben und so sollten diese ausgerichtet sein, aber selbst in diesen Fällen sind die Wörter ziemlich klein und ich könnte das Symbol machen Spalte die Breite des längsten Wortes. –

Ich empfehle die Bootstrap Media Object.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="media"> 
 
    <div class="media-left"> 
 
    <a href="#"> 
 
     <img class="media-object" src="https://placehold.it/100x100" alt="..."> 
 
    </a> 
 
    </div> 
 
    <div class="media-body"> 
 
    <h4 class="media-heading">Media heading</h4> 
 
    Here is longer text for the first list item. 
 
    </div> 
 
</div> 
 
<div class="media"> 
 
    <div class="media-left"> 
 
    <a href="#"> 
 
     <img class="media-object" src="https://placehold.it/100x100" alt="..."> 
 
    </a> 
 
    </div> 
 
    <div class="media-body"> 
 
    <h4 class="media-heading">Media heading</h4> 
 
    Here is even longer text for the first list item. Holy moly, this is some long text. It keeps going and going. 
 
    </div> 
 
</div>

Quelle

2016-07-12 13:51:49 stackingjasoncooper

Danke, das hat mir geholfen, mein Problem zu lösen, gut genug für heute mit einer Mischung aus Wörtern und fontawesome Symbolen, zumindest der Text auf der rechten Seite hüllt schön: https://codepen.io/edwardtanguay/pen/PzOmKQ –

Froh, dass es geholfen ! Vielleicht können Sie eine minimale Breite in der linken Spalte einstellen, um es aufzuräumen: https://codepen.io/stackingjasoncooper/pen/JKOJJr – stackingjasoncooper

Wie mache ich rechts/links Icons/Textlisten in Bootstrap?

Antwort

Verwandte Themen