如何实现 RTL bootstrap 4 导航栏？答案

【问题标题】：How to implement RTL bootstrap 4 navbar?如何实现 RTL bootstrap 4 导航栏？
【发布时间】：2019-05-24 22:43:54
【问题描述】：

我想让我的引导导航栏 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 导航栏？

【问题讨论】：

就这样做吧：style="float:right"
我应该把style="float:right"放在哪里？把它放在nav 标签中没有区别。
我们宣布 AryaBootstrap，最后一个版本基于 bootstrap 4.3.1 AryaBootstrap 是一个具有双重布局对齐支持的引导程序，用于 LTR 和 RTL 网页设计。将“dir”添加到 html，这是您需要做的唯一操作。查看 AryaBootstrap 网站：abs.aryavandidad.comAryaBootstrap 在 GitHub：github.com/mRizvandi/AryaBootstrap

标签： css twitter-bootstrap bootstrap-4 navbar

【解决方案1】：

您只需为您的资产净值添加一个方向：

nav {direction: rtl;}

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

【讨论】：

这很好用，但我建议创建一个自定义类，这样你就不会影响所有 <nav> 元素，例如：nav.nav-rtl {direction: rtl;} 然后将类 nav-rtl 应用到 @987654326 @要自定义的元素。无论如何，+1！
是的，我理解你，你有一个观点......很好的想法......谢谢你:)

【解决方案2】：

如果你只是想反转，那么只需改变navbar-brand元素的顺序

在第一个示例中，<a class="nav-brand"> 在 <button> 和 <ul> 之前带有链接，因此品牌位于左侧。

在第二个示例中，<a class="nav-brand"> 位于带有链接的 <button> 和 <ul> 之后，因此品牌现在位于右侧。

例子：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Logo on the left -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar on left</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </nav>
  
<!-- Logo on the right -->

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
    <a class="navbar-brand" href="#">Navbar on right</a>

</nav>

这里有更多详细信息：https://getbootstrap.com/docs/4.1/components/navbar/#toggler

【讨论】：

【解决方案3】：

一种方法是在折叠导航栏上使用justify-content-end类（在此处了解更多关于justify-content-）并使用order-类在导航栏折叠时保持井井有条/没有崩溃。检查下一个示例：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
    <span class="navbar-toggler-icon"></span>
</button>

<a href="#" class="navbar-brand order-sm-2 order-1">Logo</a>

<div class="navbar-collapse collapse order-2 order-sm-1 justify-content-end">
    <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>

更新：显示另一种选择，其导航栏从不折叠为按钮。在这种情况下，您需要在<nav> 元素上使用navbar-expand 类来替换navbar-expand-sm 类，并避免根据屏幕大小更改元素的顺序。检查下一个示例：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
    <span class="navbar-toggler-icon"></span>
</button>

<a href="#" class="navbar-brand order-2">Logo</a>

<div class="navbar-collapse collapse order-1 justify-content-end">
    <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>

【讨论】：

如何避免链接被折叠到按钮？
如果您希望导航栏永不折叠，请将navbar-expand-sm 类替换为navbar-expand，但您还必须修改订单类。我将用另一个样本更新这个......

【解决方案4】：

根据@Guilherme 的回答，这就是它对我有用的方式。他的回答对我不起作用，因为“导航栏切换器”按钮仍在左侧，并且当您打开切换器按钮时“品牌”名称会下降。所以这个答案也将解决这些问题。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar on right</a>
  <div class="collapse navbar-collapse text-right" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>

</nav>

【讨论】：

【解决方案5】：

仅使用样式属性对于 RTL 语言是不够的，而且如果您不熟悉 CSS 代码，自己更改引导程序是一项艰巨的任务！

我建议你使用从 bootstrap 派生的 Right to Left 框架，例如：

RTLCSS 引导程序 (WebSite - Github)

【讨论】：

我试过他们的代码。首先，它有点过时（最新的是 4.2.1），其次，它没有解决上述问题 - 除了替换 CS 文件之外，还需要更改标签的顺序。