html - 我想通过 css 创建以下菜单样式

Question

你可以看到，

| Nav --- Logo --- Info |

这是我想要在移动设备上使用的样式。

导航左对齐。

Logo 居中对齐。

信息右对齐。

<div id="navbar">
  <div class="item">Nav</div>
  <div class="item">Logo</div>
  <div class="item">Info</div>
</div>

我必须为每个元素实现什么样式才能获得我想要的东西？

拜托，谢谢。

Answer 1

到目前为止，实现这一目标的最简单方法是使用 flexbox。要将其限制在移动设备上，您需要将其包装在 @media 查询中，对于 Bootstrap，该查询低于 768px

#navbar {
  /* 
   * place non-mobile styles here
   * For example, to hide the navbar outside mobile...
   */
   display: none;
}
@media (max-width: 767px) {
  #navbar {
    display:flex;
    justify-content: space-between;
    align-items: center; /* optional, to center vertically */
  }
}

<div id="navbar">
  <div class="item">Nav</div>
  <div class="item">Logo</div>
  <div class="item">Info</div>
</div>