html - Navbar-toggler 搞乱了 navbar-brand 排列

Question

我正在使用 Bootstrap 4，我希望我的 navbar-toggler 出现在 navbar-brand 之前，例如 this ，但是如果我将 navbar-toggler 放在第一位，我的对齐方式就会变得一团糟。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<nav class="navbar">
  <button class="navbar-toggler navbar-light" type="button" aria-expanded="True">
        <span class="navbar-toggler-icon"></span>
    </button>
  <a class="navbar-brand">
    <h1>????</h1>
  </a>
</nav>

JSFiddle .

谢谢

Answer 1

只需在 .navbar-brand 之后应用类 .mr-auto。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<nav class="navbar">
  <button class="navbar-toggler navbar-light" type="button" aria-expanded="True">
        <span class="navbar-toggler-icon"></span>
    </button>
  <a class="navbar-brand mr-auto">
    <h1>????</h1>
  </a>
</nav>

查看 .mr-auto 类:https://getbootstrap.com/docs/4.0/utilities/flex/

希望这有帮助:)