bootstrap col passt nicht

Question

Wenn ich auf einer iPad-Querformatansicht auf meine Website "Dienste" schaue, gehen meine Dienste eine Zeile nach unten. Ich habe die Entwickler-Tools inspiziert und kann sehen, ob ich den Bootstrap 33,3% deaktiviere, jeder Service wird 50% bekommen.

Aber ich kann nicht sehen, wie ich jedes 33,3% füllen kann, wenn der Bootstrap es definiert hat. Ich habe auch definiert, wie viele Spalten die Klasse div verwenden soll. Ich habe mein CSS durchgesehen, und ich habe keinen Padding, Rand oder so, der das verursachen sollte.

<!-- begin services section --> 
<section class="services"> 
    <div class="container"> 
     <div class="row"> 

      <div class="col-xs-12 col-sm-6 col-md-4"> 
       <div class="service small"> 
        <i class="fa fa-paper-plane-o"></i> 
        <h3>AutoPilotHQ</h3> 
        <p> 
         I startet to have quite some experience building quality leads through journeys and landingpages. I have made scripts that can be integrated with several platforms. 
        </p> 
       </div> 
      </div> 

      <div class="col-xs-12 col-sm-6 col-md-4"> 
       <div class="service small"> 
        <i class="fa fa-tablet"></i> 
        <h3>Mautic</h3> 
        <p> 
         I like the idea about open source marketing automation. I am currently working on different functions to generate and build more qulity leads. 
        </p> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

Answer 1

CSS kann knifflig sein.

Das Symbol des Service <i class="fa fa-paper-plane-o"></i> ist auf float: left; eingestellt und es bremst das Layout.

diese Regel hinzufügen, es zu beheben:

.service.small:after { 
    content: " "; 
    clear: both; 
    display: table; 
} 

die folgende CSS-Regel deaktivieren auch Reparaturen Ihr Layout (Ich bin nicht sicher, warum):

.services .service { 
    margin-bottom: 30px; 
}