Blazor 和 CSS 推/拉答案

【问题标题】：Blazor and CSS Push/PullBlazor 和 CSS 推/拉
【发布时间】：2020-11-18 08:55:50
【问题描述】：

我正在使用 Blazor，但 CSS Push/Pull 似乎无法正常工作如果我使用股票 Microsoft Sample 应用程序，并将 FetchData.razor 中的表替换为：

<div class="container-fluid">
<h1>Push and Pull</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
    <div class="col-sm-4 col-sm-push-8" style="background-color:lavender;">.col-sm-4 .col-sm-push-8</div>
    <div class="col-sm-8 col-sm-pull-4" style="background-color:lavenderblush;">.col-sm-8 .col-sm-pull-4</div>
</div>

薰衣草块还在左边（也就是没有被推）（来自TryIt Tutorial on Push/Pull的示例代码）

有什么想法吗？

【问题讨论】：

标签： css twitter-bootstrap blazor

【解决方案1】：

blazor 默认网站中的引导版本与您共享的 w3schools 链接不同。默认西装外套网站上的版本是 4.3.1，w3schools 上的版本是 3.4.1

据我所知，引导程序 4 中没有 .col-sm-push-8 辅助类。相反，您可以使用类 order-*，如下所示：

<div class="container-fluid">
  <h1>Push and Pull</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-sm-4 order-4" style="background-color:lavender;">.col-sm-4 .order-4</div>
    <div class="col" style="background-color:lavenderblush;">.col</div>
  </div>
</div>

输出将是这样的：

Here are more details

【讨论】：

这个问题（现在我要测试了）是当它进入“列”模式时，你会看到 .col .col-sm-4 ,order-4 与推/拉，如果你以其他顺序定义/编写它，你会得到 .col-sm-4 ,order-4 .col

【解决方案2】：

上面真的很接近，我只是改成order-sm-xxx

【讨论】：