Bootstrap3导航栏如何将指定li标签右对齐且不折叠？

方法一：用CSS Flexbox自定义布局（推荐） #

这种方式绕开Bootstrap的浮动布局逻辑，直接用Flex来控制单个导航项的位置，完全不会触发折叠：

步骤1：修改HTML，给导航容器加自定义类 #

给<ul class="nav navbar-nav">添加一个自定义类（比如custom-flex-nav），方便我们写样式：

<nav class="navbar navbar-default" style="background-color: transparent; max-height: 40px;">
  <div class="container-fluid">
    <ul class="nav navbar-nav custom-flex-nav" style="margin-top: 0px; margin-bottom: 0px; padding-left: 15px;">
      <li class=""><a href="#" class="" style="padding: 15px"><i class="glyphicon glyphicon-comment" style="color:royalblue;"></i></a></li>
      <li class=""><a href="#" class="" style="padding: 15px"><i class="glyphicon glyphicon-option-horizontal" style="color:royalblue;"></i></a></li>
      <li class="number_three_li"><a href="#" class="" style="padding: 15px"><i class="glyphicon glyphicon-option-horizontal" style="color:royalblue;"></i></a></li>
    </ul>
  </div>
</nav>

步骤2：添加Flex样式 #

通过CSS把导航容器改成Flex布局，然后给目标<li>设置margin-left: auto，就能让它自动靠右对齐：

/* 把导航容器变成Flex容器，占满宽度 */
.custom-flex-nav {
  display: flex;
  width: 100%;
}

/* 让指定li自动靠右 */
.number_three_li {
  margin-left: auto;
}

原理：Flex布局中，margin-left: auto会让元素把剩余的空间全部“推”到自己左边，从而实现右对齐。这种方式完全不受Bootstrap响应式折叠逻辑的影响，窄屏时所有导航项都会保持横向排列（如果需要调整窄屏样式，可以自己加媒体查询）。

方法二：兼容旧浏览器的浮动方案 #

如果需要兼容不支持Flex的旧浏览器（比如IE9及以下），可以用浮动但手动覆盖Bootstrap的折叠样式：

步骤1：给目标

加自定义类 #

给number_three_li额外加一个自定义类，比如manual-pull-right：

<li class="number_three_li manual-pull-right"><a href="#" class="" style="padding: 15px"><i class="glyphicon glyphicon-option-horizontal" style="color:royalblue;"></i></a></li>

步骤2：添加自定义CSS #

/* 让目标li靠右浮动 */
.manual-pull-right {
  float: right !important;
}

/* 覆盖Bootstrap的响应式折叠样式，确保窄屏不折叠 */
@media (max-width: 767px) {
  .navbar-nav .manual-pull-right {
    float: none !important;
    display: inline-block;
  }
}

这种方法需要手动处理响应式下的样式，不如Flex方案简洁，所以优先推荐方法一。

内容的提问来源于stack exchange，提问作者David Foie Gras