移动端汉堡菜单中实现导航栏两张图片并排的方法

我来帮你搞定这个问题～首先看你现在的代码，有两个小细节需要调整，然后通过简单的CSS就能让图标在汉堡菜单里并排啦：

第一步：修正HTML里的重复ID #

你代码里两个<a>标签都用了id="insta"，这不符合HTML规范哦，ID必须是唯一的，先改成不同的标识，比如：

<li class="nav-item social-icon">
  <a id="insta-link" href="#" class="nav-link">
    <img width="35" height="35" src="insta.png" alt="Instagram">
  </a>
</li>
<li class="nav-item social-icon">
  <a id="second-icon-link" href="#" class="nav-link">
    <img width="35" height="35" src="your-second-icon.png" alt="Second Icon">
  </a>
</li>

我还给两个<li>加了自定义类social-icon，这样后面写样式的时候能精准定位它们。

第二步：添加CSS让图标在汉堡菜单里并排 #

默认情况下，Bootstrap的汉堡菜单展开后，.navbar-nav里的项是垂直排列的（flex-direction: column）。我们可以用媒体查询，针对汉堡菜单激活的屏幕尺寸（比如Bootstrap默认的lg断点，也就是屏幕宽度小于992px的时候）来调整布局：

方法一：用Flexbox包裹图标项（更灵活） #

如果想更好控制图标间距和对齐，可以把两个图标项放在一个容器里：

<li class="nav-item social-icons-container">
  <a id="insta-link" href="#" class="nav-link">
    <img width="35" height="35" src="insta.png" alt="Instagram">
  </a>
  <a id="second-icon-link" href="#" class="nav-link">
    <img width="35" height="35" src="your-second-icon.png" alt="Second Icon">
  </a>
</li>

然后添加对应的CSS：

/* 针对汉堡菜单展开的屏幕尺寸 */
@media (max-width: 991.98px) {
  .social-icons-container {
    display: flex;
    align-items: center;
    gap: 1rem; /* 图标之间的间距，可根据需求调整 */
    padding-left: 1rem; /* 和其他导航项保持对齐 */
  }
}

方法二：直接修改单个图标项的显示方式（无需改HTML结构） #

如果不想调整HTML结构，直接给之前加的social-icon类写样式就行：

@media (max-width: 991.98px) {
  .navbar-nav .social-icon {
    display: inline-block;
    margin-right: 15px; /* 调整图标之间的间距 */
  }
}

小提示 #

• 记得把your-second-icon.png换成你实际的第二张图片路径哦
• 如果你的导航用的不是默认的Bootstrap断点，可以调整媒体查询里的max-width值，匹配你项目里汉堡菜单的触发尺寸

内容的提问来源于stack exchange，提问作者Dominik Horvath