CSS Flexbox中如何在col-xs断点时保持导航栏左右Div同行

我正在为网站实现导航栏，希望将Logo和标题置于左侧，链接置于右侧。用CSS Flexbox创建了两个div放在同一行，导航栏父div宽度100%，分配了"row"类，两个子div用了col类。但调整浏览器窗口到xs断点（宽度576px）时，右侧div会下移到下一行，第一行标题后留大量空白。试过用媒体查询调整内外边距，把justify-content从"space-between"改成"flex-start"，都没解决。

现有代码 #

HTML

<div class="row portalNavbar">
  <div class="leftNav col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <img src="....."> 
    <h1>CLIENT PORTAL</h1>
  </div>
          
  <div class="rightNav col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <div class="navLink">
      <a href="${redirect}" class="navText icon-link icon-link-hover">
        <i class="bi bi-icon_name bi-house"></i>
      </a> 
    </div>
    <div class="navLink">
      <a href="${redirect}" class="navText icon-link icon-link-hover">
        About Us
      </a> 
    </div>
  </div>
</div>

CSS

.portalNavbar {
  background: rgb(69, 85, 165);
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.leftNav {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}

.rightNav {
  display: inline-flex;
  justify-content: flex-end;
  height: 100%;
  min-height: 100%;
}

@media (min-width: 400px) and (max-width: 600px) {
  .portalNavbar {
    justify-content: flex-start;
    display: inline-flex;
  }
}

解决方案 #

问题核心是Bootstrap栅格类和自定义Flex布局冲突，col-xs-6这类样式会在小屏幕下强制区块堆叠，同时你的媒体查询错误修改了父容器的display属性，导致布局失效。按以下步骤修复：

1. 移除Bootstrap栅格类
   删掉leftNav和rightNav上所有col-*类，你已经用Flexbox实现布局，不需要栅格类的约束：

   <div class="row portalNavbar">
     <div class="leftNav">
       <img src="....."> 
       <h1>CLIENT PORTAL</h1>
     </div>
             
     <div class="rightNav">
       <div class="navLink">
         <a href="${redirect}" class="navText icon-link icon-link-hover">
           <i class="bi bi-icon_name bi-house"></i>
         </a> 
       </div>
       <div class="navLink">
         <a href="${redirect}" class="navText icon-link icon-link-hover">
           About Us
         </a> 
       </div>
     </div>
   </div>
   

2. 优化Flex布局样式
   调整CSS确保左右区块始终同行，同时适配小屏幕：

   .portalNavbar {
     background: rgb(69, 85, 165);
     width: 100%;
     height: 70px;
     display: flex;
     justify-content: space-between; /* 保持左右两端对齐 */
     align-items: center;
     padding: 0 10px; /* 避免内容贴边 */
   }
   
   .leftNav {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     height: 100%;
     flex: 1; /* 左侧占据剩余空间，右侧保持内容宽度 */
     gap: 10px; /* Logo和标题的间距 */
   }
   
   /* 优化Logo和标题的响应式表现 */
   .leftNav img {
     max-width: 40px; /* 限制Logo最大宽度，防止溢出 */
     height: auto;
   }
   
   .leftNav h1 {
     margin: 0; /* 清除默认margin */
     font-size: clamp(1rem, 2vw, 1.5rem); /* 小屏幕自动缩小字体 */
     white-space: nowrap; /* 禁止标题换行 */
     color: white; /* 适配导航栏背景色 */
   }
   
   .rightNav {
     display: flex;
     justify-content: flex-end;
     align-items: center; /* 让链接垂直居中 */
     height: 100%;
     flex-shrink: 0; /* 禁止右侧区块缩小，保证内容完整 */
     gap: 20px; /* 链接之间的间距 */
   }
   
   /* 删掉无效的媒体查询 */
   

3. 极小屏幕适配（可选）
   如果屏幕宽度小于360px时链接太挤，可以进一步优化：

   @media (max-width: 360px) {
     .rightNav .navText {
       font-size: 0.8rem;
     }
     /* 或者隐藏文字只留图标：
     .rightNav .navText:not(.icon-link) {
       display: none;
     }
     */
   }
   

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