如何实现 RTL bootstrap 4 导航栏？
Posted
技术标签:
【中文标题】如何实现 RTL bootstrap 4 导航栏？【英文标题】：How to implement RTL bootstrap 4 navbar? 【发布时间】：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
【参考方案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 文件之外，还需要更改标签的顺序。以上是关于如何实现 RTL bootstrap 4 导航栏？的主要内容，如果未能解决你的问题，请参考以下文章