我正在嘗試在我的 next.js 應用程式中創建一個Bootstrap 面包屑。當我在專案中添加 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>所以問題是為什么它會這樣，解決方案是什么？
uj5u.com熱心網友回復：
根據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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/464163.html
上一篇：Flash訊息沒有采用引導樣式
下一篇：隱藏部分未正確顯示