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

Question

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

纵向：

横向：

我想要做的是让导航栏内的 li 元素均匀分布在任何 orientation.I 尝试为导航栏内的 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>

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

Resize icons for Portrait vs Landscape orientation for Navbar

css

orientation

twitter-bootstrap