Html 导航栏中的两个Div-引导4

我在Navbar有两个div。我得到两个分区的最后一个项目，就在第一个项目的下方。我认为每个div中都缺少水平空间，这就是为什么项目会在下方移动。或者我可能错过了什么。我想设置行中每个div的所有项。我需要设置哪个属性才能获得所需的结果。我不是在写“logo”，因为它位于正确的位置（左侧）。我的代码如下：

HTML

输出：

我在CSS中添加了以下内容

.mr-auto {
  display: flex;
  flex-direction: row;
}
.mr-auto > div {
  display: flex;
  flex-direction: row;
}

现在输出为：

---

如何在div1的项目中创建相等的空间？

您可以这样做

.mr-auto {
  display: flex;
  flex-direction: row;
}

.mr-auto > div {
  display: flex;
  flex-direction: row;
}

---

@谢谢你。它工作得很好。

.mr-auto {
  display: flex;
  flex-direction: row;
}
.mr-auto > div {
  display: flex;
  flex-direction: row;
}

.mr-auto {
  display: flex;
  flex-direction: row;
}

.mr-auto > div {
  display: flex;
  flex-direction: row;
}