Question

我有一个非常简单的HTML页面，总结包括Fabric UI CSS文件，并且有一个body（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 =＆＃34; ltr＆＃34; 添加到html标记或至少将div父级添加到.ms-Grid-col

＆＃13;

<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>

＆＃13;

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课程，那么就可以了

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

2 个答案: