css - 调整导航栏纵向与横向方向的图标大小

Question

对于移动应用程序，我们使用带有菜单选项的 Bootstrap 导航栏。纵向和横向分别看起来像这样。

肖像:

横向:

我想要做的是让导航栏内的 li 元素在任何方向上均匀分布。我试图为导航栏内的 li 元素提供左右填充，以便即使在方向改变后它们也会均匀分布.问题是如果我添加更多 li 元素或删除其中的一些元素，它们不会均匀分布。我可以使用任何其他选项使导航栏内的图标在任何方向上均匀分布。

Answer 1

您尝试过使用 flexbox 吗？

ul{
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  -webkit-box-pack: space-around;
  -ms-flex-pack: space-around;
  justify-content: space-around;
}

这是一个例子:https://jsfiddle.net/scrfrmLk/