如何将导航栏（navbar）中最后一个<li>元素设置为靠右对齐？

嘿，我看你在用Bootstrap 3的navbar-default导航栏，想要把最后一个列表项靠右对齐，这里有几个简单可行的方案，适配你的现有代码：

方案1：利用Bootstrap内置的navbar-right类（最推荐，符合Bootstrap规范） #

Bootstrap 3内置了navbar-right类，专门用来实现导航项靠右对齐。你只需要把最后一个<li>单独放到一个新的<ul>容器里，并给这个<ul>加上navbar-right类即可：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
  <ul class="nav navbar-nav"> 
    <li><a href="panele.html">Panele podłogowe</a></li> 
    <li class="divider"></li> 
    <li><a href="wkrety.html">Wkręty i impregnaty</a></li> 
  </ul>
  <!-- 单独放置靠右的导航项 -->
  <ul class="nav navbar-nav navbar-right">
    <li> 
      <a href="test.pdf" download="Katalog produktów Drew-Holz"> KATALOG PRODUKTÓW <i class="fa fa-file-pdf-o" style="font-size:20px;color:#FF0000"> </i></a>
    </li> 
  </ul>
</div><!-- /.navbar-collapse -->

这个方法的好处是完全遵循Bootstrap的设计规范，不会破坏原有布局的响应式特性，在移动端折叠后也能正常显示。

方案2：使用内置浮动类pull-right #

如果不想拆分原有的<ul>，可以直接给最后一个<li>加上Bootstrap内置的pull-right类，让它向右浮动：

<ul class="nav navbar-nav"> 
  <li><a href="panele.html">Panele podłogowe</a></li> 
  <li class="divider"></li> 
  <li><a href="wkrety.html">Wkręty i impregnaty</a></li> 
  <li class="pull-right"> 
    <a href="test.pdf" download="Katalog produktów Drew-Holz"> KATALOG PRODUKTÓW <i class="fa fa-file-pdf-o" style="font-size:20px;color:#FF0000"> </i></a>
  </li> 
</ul>

方案3：自定义CSS样式 #

如果需要更灵活的控制，可以自己写CSS规则。由于你的导航栏是Bootstrap 3版本（用了navbar-default），导航项是基于浮动布局的，所以可以用float: right；如果是Bootstrap 4+版本，则可以用margin-left: auto。

添加如下CSS代码（确保这段代码在Bootstrap样式文件之后加载，保证优先级）：

/* 针对Bootstrap 3的写法 */
.navbar-nav li:last-child {
  float: right;
}

/* 如果是Bootstrap 4+，可以用这个 */
/* .navbar-nav li:last-child {
  margin-left: auto;
} */

注意事项 #

• 如果你用自定义CSS，要注意导航栏的响应式适配，确保在移动端折叠后显示正常。
• 方案1是最稳妥的，因为它完全利用Bootstrap的内置样式，避免了自定义样式可能带来的布局冲突。

内容的提问来源于stack exchange，提问作者Milosz K.