office-ui-fabric - 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>

Answer 2

我在这里有同样的问题，我不知道为什么我们缺少左浮动：

.ms-Grid-col{
 position:relative;
 min-height:1px;
 padding-left:8px;
 padding-right:8px;
 box-sizing:border-box}

[dir=ltr] .ms-Grid-col{float:left}
[dir=rtl] .ms-Grid-col{float:right}

如果你添加float:left;到.ms-grid-col课堂上就可以了