Safari und bootstrap 4 flexbox Fehler

Question

Bootstrap 4 - Safari Version 10.1.2 display:table; und funktioniert nicht auf einer 100% Höhe Div.

<div class="test-slider"> 
    <div class="slide"> 
     <div class="row no-gutters"> 
      <div class="col-12 col-xs-12 col-sm-12 col-md-7 col-lg-7"> 
       <img src=""/> 
      </div> 
      <div class="col-12 col-xs-12 col-sm-12 col-md-5 col-lg-5"> 
       <div style="display:table; height:100%;"> 
         <div style="display:table-cell; vertical-align: middle;"> 
         <h2>Test center</h2> 
         <p>Should be centered</p> 
        </div>  
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Wenn ich in Chrom machen wird die Höhe von der .test-slider Klasse geerbt, die eine feste Höhe hat, während in Safari es die Höhe Inhalt nimmt, anstatt die Höhe des div füllen. Irgendwelche Ideen? Ich benutze Slick Slider.

Answer 1

Nun, derzeit habe ich Safari 11.0.1, aber wenn ich die unten stehende Stelle einstelle, zentriert es den Text vertikal zu mir.

.test-slider .row { 
    height: 500px; 
} 

die Höhe .test-slider nur Einstellung ist nicht genug, da die Kinder nicht wissen, dass sie in dieser Höhe füllen sollte. Die auf der "Tabelle" festgelegte Höhe von 100% wird aus der Höhe des übergeordneten Elements, der .col-md-5 div berechnet. Welche, in Ihrem Fall nicht über die Höhe der .test-slider wissen.

Ansonsten beachten Sie bitte, dass col-12 col-xs-12 col-sm-12 col-md-7 col-lg-7 völlig gleichbedeutend ist mit einfachem Schreiben col-md-7. Das gleiche steht natürlich für col-md-5.

Anstatt Tabellen zu verwenden, würde ich empfehlen, die flexbox utility classes bereits in Bootstrap verfügbar zu verwenden. Das macht das Markup leichter. Dies ist ein Beispiel:

.test-slider .row { 
 
    height: 300px; 
 
} 
 

 
.test { 
 
    background-color: lightgray; 
 
}

<div class="test-slider"> 
 
    <div class="slide"> 
 
     <div class="row no-gutters"> 
 
      <div class="col-md-7"> 
 
       <img src=""/> 
 
      </div> 
 
      <div class="test col-md-5 d-flex align-items-center"> 
 
       <div> 
 
        <h2 class="mb-0">Test center</h2> 
 
        <p class="mb-0">Should be centered</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">