Html 如何在flex direction列容器中使一些子项50%宽并并排？

我使用引导程序4

.navbar nav

下面是codeply的完整现场演示

当

.navbar nav

在设置的断点上进入移动折叠模式时

将应用下面的这些样式，并创建一个漂亮的导航栏按钮堆叠列表

display: flex;
flex-direction: column;

但是我需要控制最后两个子项

.nav item

的宽度。我需要这些项目并排出现

这在flex中是可能的吗

这就是导航的当前外观

这就是我希望最后两项的外观

我已经添加了两个类，最后两个项叫做

.nav account

，所以我只需要像这样设置一些css

.nav-account {
   width: 50%;
   ...
}

因此，将最后两个项目的宽度设为50%，并且彼此相邻

下面和这里是完整的代码

您可以尝试以下方法：

将

flex-wrap-flex-row

类添加到您的

ul

（这会将flex-direction设置为始终为

row

并设置flex-wrap）

将

col-12 col lg auto

添加到

nav项目中

除最后两项外（在移动视图中设置100%

flex-basis

）

将

col-6 col lg auto

添加到最后两个

nav项目

（在移动视图中为最后两个项目设置50%的弹性基准）

请参见下面的演示：

.navbar{
不透明度：1；
过渡：不透明度0.5s；
}
.导航栏隐藏{
指针事件：无；
不透明度：0；
}
.导航项目{
边框：1px纯红；
}

弯曲方向
我的问题是，在移动模式下，是否可以使用flex使注册和登录按钮宽50%并并排

一个解决方案可以将最后两个

项包装在下一个元素中：

<div class="ml-lg-auto d-inline-flex">
  ...
</div>

---

ul

应仅将

li

作为子女。。。然而，它的工作技巧我起初认为这是一个成功的答案，但我不能让自己使用无效的标记。感谢您的回答，并对非列表内容有很好的了解+1用于内联技巧。@joshmoto我已经包含了基于这两个注释的替代版本，因此没有无效标记。以防万一这对某人有用。无论如何，谢谢你的努力！谢谢你，这似乎奏效了，不像我希望的那么简单，但它的效果非常好。不错！

<div class="ml-lg-auto d-inline-flex">
  ...
</div>