如何实现RTL bootstrap 4 navbar? [英] How to implement RTL bootstrap 4 navbar?

问题描述

我想使我的引导导航栏成为RTL.那是右边的徽标，链接从右到左流动.我尝试了不同的技巧，但没有一个起作用.这是我现在拥有的代码:

I'd like to make my bootstrap navbar RTL. That is the logo in the right and the links flow from right to left. I have tried different tricks but none of they works. Here is the code I have right now:

<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导航栏?

How can I fix this code to implement RTL navbar?

推荐答案

您只需向NAV添加方向:

You just need to add a direction to your NAV:

nav {direction: rtl;}

这是一个基于您的CODE的有效示例 https://jsfiddle.net/Mohcinbn/7b6wa8rL/

This is an working example based on your CODE https://jsfiddle.net/Mohcinbn/7b6wa8rL/

这篇关于如何实现RTL bootstrap 4 navbar?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！