css - 小分辨率下的 Div 高度不一样

Question

我正在使用 Bootstrap ，因此在笔记本电脑和台式机 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>

这是管理 div 显示的 CSS 代码:

    .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