引导电网响应具有相同的身高只有在桌面版本

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给他们。