如何实现 RTL bootstrap 4 导航栏？

Question

我想制作我的引导导航栏 RTL。这是右侧的徽标，链接从右向左流动。我尝试了不同的技巧，但都没有奏效。这是我现在拥有的代码：

<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark float-right">

    <!-- Brand -->
    <a class="navbar-brand" href="#">Logo</a>

    <!-- Links -->
    <div class="collapse navbar-collapse" id="nav-content">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
      </ul>
    </div>

</nav>

如何修复此代码以实现 RTL 导航栏？

Answer 1

你只需要为你的 NAV 添加一个方向：

nav {direction: rtl;}

这是一个基于您的代码的工作示例 https://jsfiddle.net/Mohcinbn/7b6wa8rL/