NG für und Bootstrap Gitter nach unten verschoben

Question

Hallo zusammen,

Ich habe ein kleines Problem, das ich absolut KANN NICHT fix und KANN NICHT reproduce.

Die Schöpfung wie folgt aussieht:

<div class='wrapper row warp-field col-md-12 col-12'> 
<ng-template ngFor let-i="index" let-c="count" let-weeks [ngForOf]=" pagedItems"> 
    <div class=' weekBlock row col-12 col-md-12 col-lg-4'> 
     <div class="weekHeader col-12"><h1>1</h1>1</div> 
     <div class="shift col-4 col-md-4 col-xlg-4" *ngFor="let shifts of weeks | slice:1 ; let i2 = index;" > 
      <div class="wrapper col-12 col-md-12" *ngFor="let departments of shifts | slice:1 ; let i3 = index; "> 
       <div class="col-12 departmentHead" [ngSwitch]="i3 + 1"> 
        <h4 *ngSwitchCase="1"> X </h4> 
        <h4 *ngSwitchCase="2"> Y </h4> 
       </div> 
       <div class='personBlock row col-12 col-md-12' *ngFor="let people of departments; let i4 = index;"> 
        <div class='pTopRow col-6 col-md-6'> 
         <h5 class="leftText"></h5> 
        </div> 
        <div class='pTopRow col-6 col-md-6'> 
         <h5 class="rightText"> </h5> 
        </div> 
        <div class="pFooter col-12"> 
         <ul class="Days"> 
          <li> MO</li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</ng-template>          

So funktioniert es beeing fein auf kleinen Bildschirmen auf großen Bildschirmen gibt drei Spalten angezeigt werden, wird die zweite fehl am Platz nach unten.

Wenn ich diese Zeile entfernen (der blaue Bereich) funktioniert das Layout gut. Irgendwie nur in der zweiten Spalte wird dieser Block zu groß erstellt. Ich habe versucht, dieses div auf feste Höhe zu setzen, aber der Block darunter bleibt verlegt. Das div hat nur 1 benutzerdefinierte CSS-Eigenschaft und das ist "text-align: center"

Was ich bis jetzt versucht:

• Entfernen weekHeader (funktioniert, aber ich brauche es)
• die Höhe Set weekHeader auf X px // height ändert sich, aber die Position bleibt gleich
• Setze den Class-Shift-Block auf top: 0 // funktioniert nicht, aber wenn ich ihn in der Developer Console nach top -6px ändere, funktioniert es. Das Komische ist, nachdem es kann ich es nach oben erhöhen: 0px und seine Arbeits -.- vorbelegen es nicht -6px nichts ändern
• weekHeader ändern und Schaltelemente Zeile // gleiche Layout

Edit 1: - Versucht das Hinzufügen von Clearfix auf fast jedem Abschnitt keine Änderung.

Answer 1

Gefunden meine Lösung: - musste nur das Eltern-Zeilenelement auf einen beliebigen Höhenwert setzen. Es hat tatsächlich keinen Unterschied gemacht, wenn ich es mit 100% oder 10% definiere. Es hat gerade angefangen zu arbeiten. Min-Höhe war nicht genug.