Bootstrap 面包屑在 RTL 模式下无法正常工作

Question

我正在尝试在我的 next.js 应用程序中创建一个 Bootstrap breadcrumb。当我在我的项目中添加 Bootstrap 文档中的示例代码时，代码在 LTR 模式下工作得很好，但是当我尝试使用 dir="rtl" 在 RTL 中显示它时，面包屑导航不按预期工作

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<nav dir="rtl" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#">Home</a>
    </li>
    <li class="breadcrumb-item">
      <a href="#">Library</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">
      Data
    </li>
  </ol>
</nav>

所以问题是为什么它会这样，解决方案是什么？

Answer 1

根据 the RTL docs 您需要加载库的 RTL 版本。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">

<nav dir="rtl" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#">Home</a>
    </li>
    <li class="breadcrumb-item">
      <a href="#">Library</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">
      Data
    </li>
  </ol>
</nav>

Bootstrap 面包屑在 RTL 模式下无法正常工作

Bootstrap breadcrumb not working correctly in RTL mode

twitter-bootstrap

reactjs

next.js

bootstrap-5