.icon .pull-left seltsames Verhalten ausdrücken

Ich entwickle eine Anwendung mit Bootstrap (mit der Dark Admin theme) und ich habe einen kleinen Benutzer-Feed für den Admin, ähnlich dem Feed-Panel auf this demo. Mein HTML ist so, und ich vergleichen die CSS mit dem man in der Demo (so kann man davon ausgehen, dass der Stil ist buchstäblich gleich):.icon .pull-left seltsames Verhalten ausdrücken

<div id="feed_box"> 
     <section class="feed-item"> 
      <div class="icon pull-left"><i class="fa fa-info"></i></div> 
      <div class="feed-item-body"> 
        <div class="text">Some text goes here</div> 
        <div class="time pull-left">44 minutes ago.</div> 
      </div> 
     </section> 
     <section class="feed-item"> 
      <div class="icon pull-left"><i class="fa fa-info"></i></div> 
      <div class="feed-item-body"> 
        <div class="text">Some text goes here</div> 
        <div class="time pull-left">44 minutes ago.</div> 
      </div> 
     </section> 
</div>

Die HTML auch ähnlich wie das Beispiel in der Demo strukturiert . Allerdings, wenn ich die Seite in meinem eigenen Projekt öffnen, sind die icon pull-left Artikel alle über den Ort:

ich einen jsFiddle machen wollte aber wenn ich die gerenderte HTML-Seite exportiert und gesehen, dass man, es hat gut funktioniert.

Warum ist die Einrückung dieser Symbole so durcheinander? Wie behebe ich das?

Ich bin mir überhaupt nicht sicher, welche Informationen hier wichtig sind. Bitte lassen Sie es mich wissen, wenn es nicht klar genug ist.

Quelle

2016-07-19 Lennart Kloppenburg

Auf den ersten Blick sieht es aus wie ein Floating-Problem (behoben mit 'clearfix'), aber ohne CSS und HTML wird es nicht möglich sein, die Fehler zu beheben. "Angenommen, mein CSS ist dasselbe" ist niemals eine gute Voraussetzung für die Fehlerbehebung. –

Sorry, ich habe das CSS zunächst nicht aufgenommen. Ich sehe jetzt, dass das Zoomen auf der Seite dieses Verhalten ändert: 100% zeigt es richtig an, 110% induziert die Einrückung, aber 125% zeigt es seltsamerweise wieder korrekt an. Dann fängt es wieder an, bei 175% komisch zu sein. –

die clearfix Klasse hinzufügen, wird dieses Problem beheben:

<section class="feed-item clearfix"> 
    <div class="icon pull-left"><i class="fa fa-info"></i></div> 
    <div class="feed-item-body"> 
     <div class="text">Some text goes here</div> 
     <div class="time pull-left">44 minutes ago.</div> 
    </div> 
</section>

der pull-left beeinflusst die folgenden Elemente.

Wenn Sie daran interessiert sind, zu sehen, wie pull-left den Fluss der Elemente ändert, fügen Sie border: 1px solid red; in der Klasse pull-left in Ihrem CSS hinzu.

Quelle

2016-07-19 21:57:59 Toby

.icon .pull-left seltsames Verhalten ausdrücken

Antwort

Verwandte Themen