使用Bootstrap 4，如何在右侧对齐navbar品牌？

Question

我正在使用Bootstrap4。我希望navbar-brand项目（只是一个文本元素）位于最右边。菜单（通常）默认为左侧。

我试过申请ml-auto，mx-auto，mr-auto，pull-right，等没有我想要做什么。

mx-auto小屏幕很好。当有汉堡包菜单时，它将navbar品牌居中。但是，当需要常规菜单时，我需要可以工作的东西。

这是我的代码：

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu">
  <a href="#" class="navbar-brand navbar-right">BSB Feedback</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false"
    aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="navbar-collapse collapse" id="mainNav">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item homeLink">
        <a class="nav-link" href="/">
          <span aria-hidden="true" class=" fa fa-spacer-right fa-home"></span>
        </a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="/">Give Feedback</a>
      </li>
      <li class="nav-item ">
        <a class="nav-link" href="/managefeedback/">Manage Feedback</a>
      </li>
    </ul>
  </div>
</nav>

Answer 1

您可以使用order-last该类。但是，您可能希望该品牌仍然是移动屏幕上的第一/顶部，因此您可以像这样响应式地使用订单...

navbar-brand order-md-last

https://www.codeply.com/go/Vq7ajCEfsg

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu">
  <a href="#" class="navbar-brand order-md-last">BSB Feedback</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false"
    aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-collapse collapse" id="mainNav">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item homeLink">
        <a class="nav-link" href="/">
          <span aria-hidden="true" class=" fa fa-spacer-right fa-home"></span>
        </a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="/">Give Feedback</a>
      </li>
      <li class="nav-item ">
        <a class="nav-link" href="/managefeedback/">Manage Feedback</a>
      </li>
    </ul>
  </div>
</nav>

有关 Bootstrap 订购的更多信息

另一种选择是在父导航栏上响应式使用。这将切换品牌和导航链接的顺序，但仅限于非移动菜单。flex-row-reverse

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu flex-md-row-reverse">
 ...
</nav>

而且，如果您想让品牌和切换器以移动为中心，您可以将它们包装在另一个 div 中并仍然以mx-auto：https : //www.codeply.com/go/xXBdCHGAAN 为中心

相关：
Bootstrap 4 将导航栏项目向右对齐