Я пытаюсь создать Хлебные крошки 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>
поэтому вопрос в том, почему он так себя ведет и каково решение?
Для документы 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>