JSFiddle - React, Tailwind, and code Playground

by wen yongheng

HTML

<link rel="stylesheet" href="https://oggpmngp5.qnssl.com/mui/v3.4.0/mui.min.css">
<script src="https://oggpmngp5.qnssl.com/mui/v3.4.0/mui.min.js"></script>
<div class="mui-content-padded">
  <p>
    大屏(≥400px)设备上会展现为并排的两列,在小屏(＜400px)设备上会覆盖之前定义的类展现为水平排列
  </p>
  <div class="mui-row">
    <div class="mui-col-sm-6 mui-col-xs-12">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell"><a>列表1</a></li>
        <li class="mui-table-view-cell"><a>列表2</a></li>
        <li class="mui-table-view-cell"><a>列表3</a></li>
      </ul>
    </div>
    <div class="mui-col-sm-6 mui-col-xs-12">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell"><a>列表1</a></li>
        <li class="mui-table-view-cell"><a>列表2</a></li>
        <li class="mui-table-view-cell"><a>列表3</a></li>
      </ul>
    </div>
  </div>
  <p>
    列（column）大于12个,包含多余列（column）的元素将作为一个整体单元被另起一行排列。 如果不足12个列将不会撑满整个.mui-row容器
  </p>
  <div class="mui-row">
    <div class="mui-col-sm-8">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell"><a>占8份</a></li>
      </ul>
    </div>
    <div class="mui-col-sm-6">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell"><a>占6份</a></li>
      </ul>
    </div>
    <div class="mui-col-sm-3">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell"><a>占3份</a></li>
      </ul>
    </div>
  </div>

</div>