使用 Bootstrap 4，如何在右侧对齐 navbar-brand？答案

【问题标题】：Using Bootstrap 4, how to align navbar-brand on the right?使用 Bootstrap 4，如何在右侧对齐 navbar-brand？
【发布时间】：2018-07-23 18:40:45
【问题描述】：

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

我尝试过申请ml-auto、mx-auto、mr-auto、pull-right 等。没有什么能满足我的要求。

mx-auto 非常适合小屏幕。当汉堡菜单在那里时，它将导航栏品牌居中。但是，当常规菜单存在时，我需要一些可以工作的东西。

这是我的代码：

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

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4

【解决方案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>

More on Bootstrap ordering

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

<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 的新手，但仍在搞清楚很多事情。这正是我想要的方式。

【解决方案2】：

使用 .justify-content-md-end

<nav class="navbar navbar-expand navbar-dark bg-info">
 <div class="container justify-content-md-end">
  <a class="navbar-brand" href="#">Brand</a>
 </div>
</nav>

【讨论】：

【解决方案3】：

如何将navbar-brand放在右边？

将order-md-last 类添加到它（除了您试验的mx-auto）。

该排序类在中等 (md) 或更大的屏幕上重新排序元素。在较小的屏幕上，不会发生重新排序，并且会应用您的 mx-auto 类。

这是应用了该订单类的代码 sn-p：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu">
    <a href="#" class="navbar-brand mx-auto 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>

【讨论】：