Bootstrap 4 xs设备导航栏右对齐问题求助（响应式布局需求）

嘿，我来帮你搞定这个导航对齐的小问题！首先先纠正你代码里的一个小笔误——nav clas...应该是nav class="..."，这个细节可别忽略哦。

接下来针对xs设备导航右对齐的需求，我们只需要给导航所在的列容器添加响应式对齐类就能轻松解决，具体调整如下：

修改后的完整代码片段 #

<div class="container-fluid border-bottom">
  <div class="row d-flex align-items-sm-center">
    <div class="col-6 col-sm-2 logo pt-2 pb-2 text-sm-center order-sm-2">
      <img src="myimage.png">
    </div>
    <div class="col-6 col-sm-5 order-sm-1 text-right text-sm-left">
      <nav class="navbar-nav">
        <!-- 这里放你的导航项 -->
        <a class="nav-link" href="#">首页</a>
        <a class="nav-link" href="#">产品</a>
      </nav>
    </div>
  </div>
</div>

关键调整说明 #

• 给导航所在的<div class="col-6 col-sm-5 order-sm-1">添加了text-right text-sm-left：
  • text-right：在xs（超小屏）设备上让导航内容强制右对齐，完美匹配你的需求
  • text-sm-left：在sm及以上大屏设备上自动切换为左对齐，符合“导航居左”的要求
• 你原有代码里的order-sm-1/order-sm-2已经正确调整了Logo和导航在大屏下的顺序，text-sm-center也实现了大屏Logo居中，这些部分都没问题，不需要改动。

如果你的导航是用flex布局的列表（比如带d-flex的navbar-nav），也可以用flex响应式对齐类替代文本对齐类：把text-right text-sm-left换成d-flex justify-content-end justify-content-sm-start，效果完全一样，看你哪种用着顺手~

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