事業部的高度不一樣

Question

我使用的引導，所以在筆記本電腦和臺式機的div做工精細，如：

但iPad還是手機，它變得像：

HTML代碼：

<div class="thumbnail_container"> 
    <div class="col-sm-3"> 
     <div class="thumbnail"> 
      <div class="caption"> 
      <h3>First Div Test</h3> 
       <p> 

       </p> 
      </div> 
     </div> 
    </div> 
    <div class="col-sm-3"> 
     <div class="thumbnail"> 
      <div class="caption"> 
      <h3>Second Div Test</h3> 
       <p> 

       </p> 
      </div> 
     </div> 
    </div> 
</div> 

下面是CSS代碼來管理DIV顯示：

.thumbnail_container .thumbnail 
    { 
    border-color: white; 
     color: black; 
     width: 100%; 
     padding-right: 0px; 
     padding-left: 0px; 
     padding-top: 0px; 
     border-color: lightseagreen; 

    } 


    .thumbnail_container 
    { 
     text-align: center; 
     margin-top: 30px; 
    } 


    .thumbnail span 
    { 
     left:0; right:0; 
     margin: auto; 
    } 

    .caption > p 
    { 
     color: black; 
     width: 100%; 
     margin-top: 0px; 
     text-align: justify; 

    } 

如何讓所有的DIV高度在任何屏幕分辨率一樣嗎？

Answer 1

變化class="thumbnail_container"到class="thumbnail_container equal" ，然後將以下代碼複製並粘貼

/*make thumbnail div height equal */ 
    @media screen and (min-width: 768px) 
    { 
    .equal, .equal > div[class*='col-'] 
    { 
     display: -webkit-box; 
     display: -moz-box; 
     display: -ms-flexbox; 
     display: -webkit-flex; 
     display: flex; 
     flex:1 1 auto; 
     } 
     } 

working fiddle

Answer 2

只要給display: flex;至.thumbnail_container和height: 100%;至.thumbnail將使高度相等。

Working Fiddle