专业提示：在使用 RTL 之前，先通过我们的 入门指南 熟悉 Bootstrap。
它是如何工作的
Bootstrap 在整个框架中使用 CSS 逻辑属性 来使 RTL 支持成为原生且自动的。将 dir="rtl" 设置为并添加 lang 属性，例如 lang="ar"，在你的 HTML 元素上，浏览器将为你处理方向布局的更改。不需要单独的样式表。
逻辑属性是 CSS 属性，它们会根据内容的书写模式和方向进行适应。它们不使用物理方向如 left 和 right，而是使用逻辑概念如 start 和 end：
margin-left→margin-inline-startmargin-right→margin-inline-endpadding-left→padding-inline-startborder-right→border-inline-end
当你设置 dir="rtl" 时，这些逻辑属性会自动翻转以匹配从右到左的布局，无需任何额外的 CSS 转换。只需要更改 HTML。
必需的 HTML
只需对你的 HTML 进行一行更改即可启用 RTL。然后，Bootstrap 将使用逻辑属性自动适应 RTL 方向。
<html lang="en">
<html lang="ar" dir="rtl">
现场演示
在此页面上切换LTR和RTL，以查看Bootstrap的逻辑属性的实际效果：
改变方向
需要在同一页面上同时使用 LTR 和 RTL 吗？ 将你的内容包裹在具有不同 dir 属性的容器中：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css" integrity="sha384-B/GM4XqrwHnWXNOWMbloTmrYXZg10cakYGmpfsR/bbzQ6JAJI4ihuyADKLnBgrCe" crossorigin="anonymous">
<title>LTR and RTL</title>
</head>
<body>
<!-- LTR content -->
<div dir="ltr" lang="en">
<!-- … -->
</div>
<!-- RTL content -->
<div dir="rtl" lang="ar">
<!-- … -->
</div>
</body>
</html>