调整Navbar的纵向与横向方向的图标

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/

Answer 2

这对于flexbox来说有点微不足道。

将display: flex添加到容器中。然后，您可以使用justify-content: space-between实现均匀的水平间距。如果您还想垂直居中，请添加align-items: center。

请注意，space-between会将第一个和最后一个元素保留在边，而space-around则不会。选择您喜欢的任何一种。

一个例子：

.container {
  display: flex;
  width: 100%;
  height: 50px;
  background: #333;
  align-items: center;
  justify-content: space-between;
}

.icon {
  width: 30px;
  height: 30px;
  margin: 0 10px;
  border-radius: 15px;
  background: #fff;
}

<div class="container">
  <div class="icon"></div>
  <div class="icon"></div>
  <div class="icon"></div>
  <div class="icon"></div>
  <div class="icon"></div>
</div>