html - 移动屏幕时如何将两个图像放在彼此相邻的导航栏中

Question

我需要在导航栏中放置两个 png-s，并且当在较小屏幕上的汉堡菜单中时，我需要它们彼此相邻。有什么建议吗？到目前为止，这是我的代码:

<li class="nav-item" >
    <a id="insta" href="#" class="nav-link"><img width="35" height="35" src="insta.png" alt=""></a>
        </li>
    <li class="nav-item" >
      <a id="insta" href="#" class="nav-link"><img width="35" height="35" src="insta.png" alt=""></a>    
      </li>

如何实现？

Answer 1

如果您使用的是 Bootstrap 4将此媒体查询用于移动设备

@media (max-width: 576px) { 
.nav-item {
    display: inline-block;
  }

}

如果您使用的是 Bootstrap 3将此媒体查询用于移动设备

@media (max-width: 768px) { 
.nav-item {
    display: inline-block;
  }

}