移动端Navbar点击汉堡菜单后换行及汉堡菜单左置问题求助

云原生阿岚

2026-7-29

解决方案

问题根源是移动端下，navbar的容器未使用flex布局，导致品牌标识和汉堡按钮默认换行显示。添加以下CSS：

@media (max-width: 992px) {
  .navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

该设置能确保品牌标识与汉堡按钮始终在同一行，不会因菜单展开触发换行。

2. 调整移动端汉堡菜单到左侧

之前order设置无效是因为父容器未启用flex布局，现在补上布局设置后，调整元素order即可实现汉堡居左：

@media (max-width: 992px) {
  .navbar-brand {
    order: 1; /* 让品牌标识排在汉堡按钮之后 */
  }
}

同时删除你之前添加的.navbar-header相关样式，Bootstrap 4中无此类，且当前布局不需要它。

完整修正后的CSS

.bg-light {
    background-color: #0c66eb !important;
}

/* 移动端Navbar布局修正 */
@media (max-width: 992px) {
  .navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .navbar-brand {
    order: 1;
    display: flex !important;
  }
}

/* mobile navbar sidebar under lg breakpoint */
@media (max-width: 992px) {
    .navbar-collapse.collapsing .navbar-nav {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        left: -45%;
        transition: all 0.2s ease;
    }

    .navbar-collapse.show .navbar-nav {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        flex-direction: column;
        height: auto;
        width: 45%;
        background-color: #fff !important;
        transition: left 0.35s ease;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
}