Fabric UI核心网格布局不起作用

Question

我有一个非常简单的HTML页面，该页面总而言之包括Fabric UI CSS文件，并带有一个正文（body.ms-Fabric）

<div class="ms-Grid">
    <div class="ms-Grid-row">
        <div class="ms-Grid-col ms-sm12 ms-u-md4 ms-lg2">
            Column 1
        </div>
        <div class="ms-Grid-col ms-sm12 ms-md8 ms-lg10">
            Column 2
        </div>
    </div>
</div>

但显示两行而不是预期的两列

我究竟做错了什么？

我是否还缺少其他任何CSS包含或类？

谢谢

Answer 1

确实有效。:)当他们包括rtl支持时，他们似乎已经忘记更新其指南。只需将dir =“ ltr”添加到html标记中，或至少将div父级添加到.ms-Grid-col

<link href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.3.0/css/fabric.min.css" rel="stylesheet" />
<div class="ms-Fabric" dir="ltr">

  <div class="ms-Grid">
    <div class="ms-Grid-row">
      <div class="ms-Grid-col ms-sm6 ms-md4 ms-lg2">A</div>
      <div class="ms-Grid-col ms-sm6 ms-md8 ms-lg10">B</div>
    </div>
  </div>
</div>