Question

有什么方法可以实现MDL（材料设计精简版）中的bootstrap推拉。

我正在使用的用例是并排出现在桌面上的2个cols：

A(mdl-cell-col--6)     B(mdl-cell-col--6)

但是在平板电脑上我想要颠倒顺序：所以平板电脑视图上的新订单将是

B(mdl-cell-col--6)     A(mdl-cell-col--6)

感谢任何帮助！

Answer 1

您可以使用mdl-cell--order-N类（ -tablet后缀）。

所以

为A添加mdl-cell--order-2-tablet，为B

添加mdl-cell--order-1-tablet

您应该同时添加mdl-cell--4-col-tablet，因为tablet被假定为8列

.mdl-cell {
  background-color: #BDBDBD;
  padding-left: 8px;
  padding-top: 4px;
  color: white;
  height: 50px;
}

    <!-- Material Design Lite -->
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    
    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--order-2-tablet">A</div>
      <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--order-1-tablet">B</div>
    </div>

有没有办法实现像MDL中的推拉一样的引导（Materail设计）

1 个答案: