사파리와 부트 스트랩 4 인 flexbox 오류

Question

부트 스트랩 4 - 사파리 버전 100 % 높이 DIV 작동하지 10.1.2 display:table; 및 display:table-cell; vertical-align:center;. 내가 크롬에 렌더링하는 경우

<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> 

높이 사파리에이 사업부의 높이를 작성하기보다는 내용의 높이를 소요하는 동안 고정 된 높이를 가지고 .test-slider 클래스에서 상속됩니다. 어떤 아이디어? 매끄러운 슬라이더를 사용하고 있습니다.

Answer 1

음, 현재 나는 사파리 11.0.1를 가지고,하지만 난 아래 stlye을 설정하면, 그것은 나에게 수직으로 텍스트를 중심 않습니다. 어린이들이 그 높이를 작성해야합니다 알고하지 않기 때문에에만 .test-slider에 높이를 설정

는

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

, 충분하지 않습니다. "테이블"에 설정된 100 % 높이는 부모 높이 인 .col-md-5 div에서 계산됩니다. 귀하의 경우에는 .test-slider의 키에 대해 알지 못합니다.

그 외의 경우 col-12 col-xs-12 col-sm-12 col-md-7 col-lg-7은 단순히 col-md-7으로 작성하는 것과 완전히 동일합니다. 물론 col-md-5을 의미합니다.

또한, 대신 테이블을 사용하여, 나는 부트 스트랩에서 이미 사용할 수있는 flexbox utility classes를 사용하는 것이 좋습니다. 마크 업이 가벼워졌습니다.

.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">