javascript - 如何在 Bootstrap 导航栏中为桌面和移动设备订购元素

Question

我在为台式机和移动设备正确订购商品的最佳方式方面遇到了一些问题。

在我想要的桌面模式下(目前正在运行):

1. 在左边搜索

   但是，对于移动设备，我希望:

   • 左侧默认位置的汉堡包图标，当前为
   • 在右边搜索，当前是
   • 品牌在中心，但无论我做什么，它都不在中心。

有人可以指出我在这里做错了什么吗？我正在使用 flex ordering 和 margin autos 来定位元素，但移动品牌拒绝定位在中心。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-nav" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
  <div class="d-flex flex-lg-fill">
    <form class="form-inline mr-lg-auto order-sm-last mr-sm-auto">
      <input class="form-control" type="text" placeholder="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>

    <a class="navbar-brand ml-lg-auto order-lg-last" href="">Brand</a>
  </div>
  <div class="collapse navbar-collapse" id="collapse-nav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>

</nav>

Answer 1

下面的代码现在可以在移动设备上运行

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-nav" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
  <div><a class="navbar-brand ml-lg-auto order-lg-last" href="">Brand</a></div>
  <div class="d-flex flex-lg-fill">
    <form class="form-inline mr-lg-auto order-sm-last mr-sm-auto">
      <input class="form-control" type="text" placeholder="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
  <div class="collapse navbar-collapse" id="collapse-nav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>

</nav>