当汉堡菜单可见时，如何将导航栏项移动到第一位？答案

【问题标题】：How to move a navbar item to the first place when the hamburger menu is visible?当汉堡菜单可见时，如何将导航栏项移动到第一位？
【发布时间】：2020-01-22 22:31:46
【问题描述】：

我正在使用 Bootstrap 构建一个新网站，并且我有一个 NavBar，它在任何台式机或平板电脑上看起来都很好，因为它有链接和右上角的搜索框：

但是，我觉得在移动设备中在菜单底部进行搜索有点不方便：

这是我的示例代码的小提琴：

https://jsfiddle.net/hpxgowa8/

这是通用代码：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="javascript:void(0)">Gravity Now!</a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navb">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Calculator</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Comparison</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">About</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
    </form>
  </div>
</nav>

我想知道是否有人知道当汉堡菜单可见时我可以更改什么以将搜索框作为第一个元素移动？

【问题讨论】：

在显示移动分辨率时在此处使用css grid solution。这使您能够以您喜欢的任何顺序放置物品。

标签： css twitter-bootstrap bootstrap-4 navbar

【解决方案1】：

以下网格解决方案将起作用：

通过在div 上使用网格display: grid。 div 分为两部分。第一个 row 在 grid-template-rows 中定义为 25%，其余为 75%，因为菜单分为列表和表单。

然后使用grid-row将搜索栏设置为第1行，将列表设置为第2行并presto。

#navb  {
  display: grid;
  grid-template-rows: 25% 75%;
}

#navb > ul.navbar-nav {
  grid-row: 2;
}

#navb > form.form-inline.my-2.my-lg-0 {
  grid-row: 1;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="javascript:void(0)">Gravity Now!</a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navb">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Calculator</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Comparison</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">About</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
    </form>
  </div>
</nav>

掌握 css-grids（结合弹性盒子）是对 css 技能的强大补充。检查此link 以查看它是否符合您的项目的兼容性并了解有关网格here 的更多信息。

【讨论】：

太棒了！我将在一周内详细研究它们！非常感谢！
这是一个非常糟糕的编码架构。您提出了一个解决方案，当只需要改变顺序（与身高无关）时，该解决方案需要知道（和硬编码）孩子和父母之间的身高比例。假设您有一个动态菜单项（仅出现在某些页面上或处于特定状态）。或者菜单项之一是手风琴。你现在需要JS来更新网格的比例，跨浏览器。很多不必要的工作。
@AndreiGheorghiu 网格和弹性盒解决方案非常灵活，提供的示例只是概念证明。当然，您也可以动态更改元素的位置，使用浮动或其他方式。上述样本 - 基于提供的样本 - 有效；再次作为概念证明，我建议进一步扩展网格和弹性盒子。

【解决方案2】：

使用 flexbox 也很容易实现，如果将 navbar-collapse 包装器设置为 flex 项，则可以更改其内容的order：

 .navbar-collapse {
    display: flex;
    flex-direction: column;
 }

 .form-inline {
    order: -1;
 }

https://jsfiddle.net/dgz7h01w/

【讨论】：