Хлебные крошки начальной загрузки не работают должным образом в режиме RTL

Я пытаюсь создать Хлебные крошки Bootstrap в своем приложении next.js. когда я добавляю пример кода из документации Bootstrap в свой проект, код отлично работает в режиме LTR, но когда я пытаюсь отобразить его в RTL с помощью dir = "rtl", хлебные крошки не работают должным образом

<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/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>

поэтому вопрос в том, почему он так себя ведет и каково решение?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
20
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для документы RTL вам необходимо загрузить RTL-версию библиотеки.

<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/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>

Другие вопросы по теме