logo标签列表

如何实现RTL Bootstrap 4导航栏？

csstwitter-bootstrapbootstrap-4navbar
5

我想让我的Bootstrap导航栏从右到左显示，包括将标志放在右侧并使链接从右向左流动。我尝试了不同的技巧，但都没有成功。以下是我目前使用的代码：

<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"。 - I_Al-thamary
我应该把 style="float:right" 放在哪里？将其放在 nav 标签中没有任何区别。 - Babr
我们宣布AryaBootstrap的发布， 最新版本基于bootstrap 4.3.1。 AryaBootstrap是一个支持双向布局对齐的bootstrap，用于LTR和RTL网页设计。 只需将“dir”添加到HTML中即可。 请访问AryaBootstrap网站：http://abs.aryavandidad.com/ 在GitHub上获取AryaBootstrap：https://github.com/mRizvandi/AryaBootstrap - mRizvandi
5个回答
11
2
这个很好用，但我建议创建一个自定义类，这样就不会影响所有的<nav>元素，例如：nav.nav-rtl {direction: rtl;}，然后将类nav-rtl应用于您想要自定义的<nav>元素。无论如何，加一！ - Shidersz
1
是的，我明白你的意思，你有自己的观点...思维敏捷，谢谢 :) - Mohcin Bounouara
1
如果您只想反转顺序，只需更改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
1
一种方法是使用类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>

如何避免链接被折叠成按钮？ - Babr
如果您希望导航栏永远不会折叠，请将类navbar-expand-sm替换为navbar-expand，但您还需要修改类的顺序。我会提供另一个示例来说明这一点... - Shidersz
0

基于@Guilherme的答案，这对我很有用。他的答案对我没有用，因为“navbar-toggler”按钮仍然在左侧，而“Brand”名称在打开切换器按钮时向下移动。所以这个答案也会解决这些问题。

<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>
-1

使用样式属性对于从右到左的语言来说是不够的，而且如果您不熟悉CSS代码，自己更改bootstrap是一项艰巨的任务！

我建议您使用一个从bootstrap分支出来的从右到左框架，例如：

RTLCSS Bootstrap（网站 - Github）

我已经尝试过他们的代码。首先，它有点过时（最新版本是4.2.1），其次，它并不能解决上述问题——当需要改变标签顺序时，除了替换CS文件之外还需要做其他处理。 - kneidels
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接