Question

我需要在导航栏中放两个png-s，当我在较小屏幕上的汉堡菜单中时，我需要它们彼此相邻。任何sugestions？到目前为止，这是我的代码：

<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

使用内联块，如下所示：

@media screen and (max-width: 800px) {

  li.nav-item {
    display: inline-block;
  }

}

Answer 2

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

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

}

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

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

}

移动屏幕时如何将两个图像放在导航栏中

2 个答案: