Warum reagiert diese Bootstrap-Spalte?

Question

Warum verschachtelt sich der Inhalt in jedem Listenelement? Der Inhalt sollte alle in derselben Zeile stehen. Ich habe versucht floating und die position ändern, aber nichts funktioniert. Wie behebe ich das?

.icon-left{ 
 
    float:left; 
 
    padding: 12px 25px 60px 15px; 
 
    color:#4ECABE; 
 
} 
 
.text{ 
 
    text-align:left; 
 
    padding:0 0 0 15px; 
 
} 
 
.text h4{ 
 
    padding-bottom:5px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
 
      <div class="icon-left"> 
 
       <i class="fa fa-ticket fa-3x"></i> 
 
      </div> 
 
      <div class="text"> 
 
       <h4>Get Free Books</h4> 
 
       <p>Increase your chances to win by doing simple tasks - like watching videos :) </p> 
 
      </div> <br> 
 
      <div class="icon-left" id='smile'> 
 
       <i class="fa fa-smile-o fa-3x"></i> 
 
      </div> 
 
      <div class="text2"> 
 
      <h4>New Books Every 6 Hours</h4> 
 
       <p>That's right, you only have 6 hours to get entries for a book.</p> 
 
      </div> <br> 
 
      <div class="icon-left"> 
 
       <i class="fa fa-truck fa-3x"></i> 
 
      </div> 
 
      <div class="text"> 
 
      <h4>Absolutely free!</h4> 
 
       <p>We even pay shipping.</p> 
 
      </div> 
 
     </div>

Answer 1

Sie müssen die Schwimmer löschen. Sie können entweder br { clear: both; } mit Ihrem vorhandenen Markup anwenden, oder ein besserer Weg, es mit Bootstrap zu machen, besteht darin, die Elemente .icon-left und .text in ein Element mit der Klasse .clearfix einzubinden.

.icon-left{ 
 
    float:left; 
 
    padding: 12px 25px 60px 15px; 
 
    color:#4ECABE; 
 
} 
 
.text{ 
 
    text-align:left; 
 
    padding:0 0 0 15px; 
 
} 
 
.text h4{ 
 
    padding-bottom:5px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
 
    <div class="clearfix"> 
 
    <div class="icon-left"> 
 
     <i class="fa fa-ticket fa-3x"></i> 
 
    </div> 
 
    <div class="text"> 
 
     <h4>Get Free Books</h4> 
 
     <p>Increase your chances to win by doing simple tasks - like watching videos :) </p> 
 
    </div> 
 
    </div> 
 
    <div class="clearfix"> 
 
    <div class="icon-left" id='smile'> 
 
     <i class="fa fa-smile-o fa-3x"></i> 
 
    </div> 
 
    <div class="text2"> 
 
     <h4>New Books Every 6 Hours</h4> 
 
     <p>That's right, you only have 6 hours to get entries for a book.</p> 
 
    </div> 
 
    </div> 
 
    <div class="clearfix"> 
 
    <div class="icon-left"> 
 
     <i class="fa fa-truck fa-3x"></i> 
 
    </div> 
 
    <div class="text"> 
 
     <h4>Absolutely free!</h4> 
 
     <p>We even pay shipping.</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Geben Sie Ihren .icon-left einen farbigen Hintergrund divs (z background: gold) und es soll deutlich werden. Die untere Polsterung erstreckt sich über die nicht schwimmenden Elemente auf der rechten Seite, die die nächste Reihe entlang schieben.

Reduzieren Sie die Polsterung auf .icon-left (zum Beispiel zu padding: 12px 25px 24px 15px;) sollte alles wieder in Einklang zu schnappen ermöglichen.

---

leicht in keinem Zusammenhang Tipp: fügen Sie die Klasse fa-fw zu Ihrem FA-Symbole mit fester Breite Symbole zu verwenden, die Ihren Text perfekt aufreihen ermöglicht.

Answer 3

Sie haben extra Polsterung Symbol links

try padding: 12px 25px 25px 15px;

Auch ich würde jeden Abschnitt mit einem div und einer Rasterklasse col-lg-3 umschließen, so dass Sie nicht diese große Auffüllung verwenden müssen, und Ihnen eine bessere Kontrolle über Ihre Benutzeroberfläche geben wird.