如何将 Visual Studio 中的默认 Blazor 服务器应用程序模板设为 RTL？

Question

我想在不使用dir='rtl'的情况下将默认的 Blazor 模板设为 RTL，因为它会导致与 DevExpress 组件发生一些冲突。 另外，我想让RenderBody区域在屏幕宽度较小的情况下可以水平滚动？ 我怎样才能实现它们？

Answer 1

您可以使用bootstrap.rtl而不是一般的引导程序。 因此，您的_Layout.cshtml将具有以下样式表参考：

<link rel="stylesheet" href="~/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/bootstrap.rtl.min.css" />
<link rel="stylesheet" href="~/css/bootstrap-grid.rtl.min.css" />
<link rel="stylesheet" href="~/css/bootstrap-reboot.rtl.min.css" />    

您也可以使用RTLCSS 。 而不是创作两组 CSS 个文件，每个语言方向一个。 现在您可以编写 LTR 版本，RTLCSS 会自动为您创建 RTL 版本。

  .example {
  display: inline-block;
  padding: 5px 10px 15px 20px;
  margin: 5px 10px 15px 20px;
  border-style: dotted dashed double solid;
  border-width: 1px 2px 3px 4px;
  border-color: red green blue black;
  box-shadow: -1em 0 0.4em gray, 3px 3px 30px black;
}

将转化为：

  .example {
  display: inline-block;
  padding: 5px 20px 15px 10px;
  margin: 5px 20px 15px 10px;
  border-style: dotted solid double dashed;
  border-width: 1px 4px 3px 2px;
  border-color: red black blue green;
  box-shadow: 1em 0 0.4em gray, -3px 3px 30px black;
}

如果您需要在同一页面上同时使用 LTR 和 RTL，则可以使用RTLCSS String Maps 。

对于水平滚动，您可以使用虚拟化组件和此链接中提到的一些 JavaScript 代码。