Html 引导网格响应，仅在桌面版本中具有相同高度

我有一个网格：

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

/*用法
*/
/*内容样式*/
.里面{
边缘顶部：20px；
边缘底部：20px；
背景：#ededed；
背景：-webkit渐变（线性、左上、左下、颜色停止（0%、#f4）、颜色停止（100%、#eded））；
背景：-莫兹线性梯度（顶部，0%，100%）；
背景：-ms线性梯度（顶部，0%，100%）；
}
.内部全高{
/*
//如果你想给内容一个完整的高度，给他高度：100%；
//如果内容为全高，则无法对内容应用边距
//内容完整高度在ie中不起作用http://stackoverflow.com/questions/27384433/ie-display-table-cell-child-ignores-height-100
*/
身高：100%；
边际上限：0；
页边距底部：0；
}
/*相同高度样式的列*/
.行高{
显示：表格；
表布局：固定；
身高：100%；
宽度：100%；
}
.col高度{
显示：表格单元格；
浮动：无；
身高：100%；
}
上校·托普{
垂直对齐：顶部；
}
中校{
垂直对齐：中间对齐；
}
伯顿上校{
垂直对齐：底部对齐；
}
@介质（最小宽度：480px）{
.X行高度{
显示：表格；
表布局：固定；
身高：100%；
宽度：100%；
}
.X柱高度{
显示：表格单元格；
浮动：无；
身高：100%；
}
.col xs顶部{
垂直对齐：顶部；
}
中校{
垂直对齐：中间对齐；
}
.X列底部{
垂直对齐：底部对齐；
}
}
@介质（最小宽度：768px）{
.行sm高度{
显示：表格；
表布局：固定；
身高：100%；
宽度：100%；
}
.sm柱高度{
显示：表格单元格；
浮动：无；
身高：100%；
}
山口{
垂直对齐：顶部；
}
中校{
垂直对齐：中间对齐；
}
.山口{
垂直对齐：底部对齐；
}
}
@介质（最小宽度：992px）{
.行md高度{
显示：表格；
表布局：固定；
身高：100%；
宽度：100%；
}
.col md高度{
显示：表格单元格；
浮动：无；
身高：100%；
}
.col md顶部{
垂直对齐：顶部；
}
中校{
垂直对齐：中间对齐；
}
.col md底部{
垂直对齐：底部对齐；
}
}
@介质（最小宽度：1200px）{
.第1排高度{
显示：表格；
表布局：固定；
身高：100%；
宽度：100%；
}
.col lg高度{
显示：表格单元格；
浮动：无；
身高：100%；
}
.col lg top{
垂直对齐：顶部；
}
中校{
垂直对齐：中间对齐；
}
.col lg底部{
垂直对齐：底部对齐；
}
}

---

问题是我不知道如何只在桌面上使用它。当然，我可以做<代码>隐藏xs<代码>和<代码>隐藏LG，只复制HTML，但是我不认为这很好。

< P>除了问题中的代码之外，我只添加了以下媒体查询：

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

---

然后，对于在移动版本中不应具有相同高度效果的元素，您只需向其添加class

var height mobile

。

除了768px以上的媒体查询之外，您是否可以删除您添加的CSS，使其具有相同高度？您明确地告诉行始终像表格单元格一样工作。我在移动视图中的一个位置使用“相同的列高度”。所以我只想知道如何在某些地方禁用，而不是所有地方。使用针对桌面的媒体查询并使用“vh”单元。媒体查询很好，但“vh”还不够支持。谢谢