引導電網響應具有相同的身高只有在桌面版本

Question

我有這樣的網格：

<div class="row"> 
    <div class="col-lg-4 col-xs-12"> ... </div> 
    <div class="col-lg-4 col-xs-12"> ... </div> 
    <div class="col-lg-4 col-xs-12"> ... </div> 
</div> 

我怎樣才能確保我的桌面版本，三列具有相同的高度，但在移動版本，高度適合內容？

我正在使用「hack」版本來讓它們在相同的高度上造型，這讓行認爲它是一張桌子。它看起來像這樣：

/* USAGE 
    <div class="row"> 
     <div class="row-height"> 
     <div class="col-xs-2 col-xs-height col-xs-middle"> 
      <div class="inside"></div> 
     </div> 
     <div class="col-xs-4 col-lg-5 col-xs-height col-xs-middle"> 
      <div class="inside"></div> 
     </div> 
     </div> 
    </div> 
    */ 

    /* content styles */ 

    .inside { 
     margin-top: 20px; 
     margin-bottom: 20px; 
     background: #ededed; 
     background: -webkit-gradient(linear, left top, left bottom,color-stop(0%, #f4f4f4), color-stop(100%, #ededed)); 
     background: -moz-linear-gradient(top, #f4f4f4 0%, #ededed 100%); 
     background: -ms-linear-gradient(top, #f4f4f4 0%, #ededed 100%); 
    } 
    .inside-full-height { 
     /* 
     // if you want to give content full height give him height: 100%; 
     // with content full height you can't apply margins to the content 
     // content full height does not work in ie http://stackoverflow.com/questions/27384433/ie-display-table-cell-child-ignores-height-100 
     */ 
     height: 100%; 
     margin-top: 0; 
     margin-bottom: 0; 
    } 

    /* columns of same height styles */ 

    .row-height { 
     display: table; 
     table-layout: fixed; 
     height: 100%; 
     width: 100%; 
    } 
    .col-height { 
     display: table-cell; 
     float: none; 
     height: 100%; 
    } 
    .col-top { 
     vertical-align: top; 
    } 
    .col-middle { 
     vertical-align: middle; 
    } 
    .col-bottom { 
     vertical-align: bottom; 
    } 

    @media (min-width: 480px) { 
     .row-xs-height { 
     display: table; 
     table-layout: fixed; 
     height: 100%; 
     width: 100%; 
     } 
     .col-xs-height { 
     display: table-cell; 
     float: none; 
     height: 100%; 
     } 
     .col-xs-top { 
     vertical-align: top; 
     } 
     .col-xs-middle { 
     vertical-align: middle; 
     } 
     .col-xs-bottom { 
     vertical-align: bottom; 
     } 
    } 

    @media (min-width: 768px) { 
     .row-sm-height { 
     display: table; 
     table-layout: fixed; 
     height: 100%; 
     width: 100%; 
     } 
     .col-sm-height { 
     display: table-cell; 
     float: none; 
     height: 100%; 
     } 
     .col-sm-top { 
     vertical-align: top; 
     } 
     .col-sm-middle { 
     vertical-align: middle; 
     } 
     .col-sm-bottom { 
     vertical-align: bottom; 
     } 
    } 

    @media (min-width: 992px) { 
     .row-md-height { 
     display: table; 
     table-layout: fixed; 
     height: 100%; 
     width: 100%; 
     } 
     .col-md-height { 
     display: table-cell; 
     float: none; 
     height: 100%; 
     } 
     .col-md-top { 
     vertical-align: top; 
     } 
     .col-md-middle { 
     vertical-align: middle; 
     } 
     .col-md-bottom { 
     vertical-align: bottom; 
     } 
    } 

    @media (min-width: 1200px) { 
     .row-lg-height { 
     display: table; 
     table-layout: fixed; 
     height: 100%; 
     width: 100%; 
     } 
     .col-lg-height { 
     display: table-cell; 
     float: none; 
     height: 100%; 
     } 
     .col-lg-top { 
     vertical-align: top; 
     } 
     .col-lg-middle { 
     vertical-align: middle; 
     } 
     .col-lg-bottom { 
     vertical-align: bottom; 
     } 
    } 

問題是我不知道如何使用這隻適用於桌面。當然，我可以做hidden-xs和hidden-lg，只是複製html，但我不認爲那很好。

Answer 1

除了在問題的代碼，我只是增加了以下媒體查詢：

@media (max-width: 768px) {  
    .col-height.var-height-mobile{ 
     display:block; 
     height: auto; 
    } 
    } 

，然後爲不應在移動版相同的高度效果的元素，你只需要添加類var-height-mobile給他們。