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>

如何确保在我的桌面版中，三列具有相同的高度，但在移动版中，高度是否适合内容？

我正在使用＆＃34; hack＆＃34;将它们设置为相同高度的版本，这使得行认为它是一个表。它看起来像是：

/* 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添加到它们中。

Bootstrap网格仅在桌面版本中响应相同的高度

1 个答案: