你可以通过扩展Bootstrap很容易地实现这种行为。

JSBin上的演示：http://jsbin.com/zaniz/1/edit?html,css,output
我所做的只是在<ul>中添加了一个right-to-left类，CSS样式应该是：

.right-to-left li { float: right; }

我添加了以下规则来解决这个问题，而不会丢失ul上的边框或重新排序标记：

.nav-tabs-right       { text-align: right; }
.nav-tabs-right > li  { display: inline-block; float: none; }

您可以直接将其应用于.nav-tabs，但我更喜欢创建一个单独的类来替换.navbar-right

你可以试试这个;如果希望灰线水平覆盖整个页面

<div class="container" >
<h1 align="center"><a href="#">My Site</a></h1>
<div class="container" >
<ul class="nav nav-tabs" >
  <li class="active pull-right" ><a href="#">tab1</a></li>
  <li class="pull-right"><a href="#">tab2</a></li>
  <li class="pull-right"><a href="#">tab3</a></li>  
  <li class="pull-right"><a href="#">tab4</a></li>  
</ul>
</div>
<br>
Hello

</div>

我刚刚在<ul>中添加了一个float: right;（等于pull-right）样式，它似乎产生了所需的输出，因为tab1是最右边的一个，所以最好对标记重新排序如下：

<ul class="nav nav-tabs navbar-right" >
    <li class="active"><a href="#">tab4</a></li>
    <li><a href="#">tab3</a></li>
    <li><a href="#">tab2</a></li>
    <li><a href="#">tab1</a></li>  
</ul>

使用Bootstrap 5，您可以简单地将justify-content-end添加到<ul>类中

<div class="container" >
<h1 align="center"><a href="#">My Site</a></h1>
<div class="container" >
  <ul class="nav nav-tabs justify-content-end" >
    <li class="active"><a href="#">tab1</a></li>
    <li><a href="#">tab2</a></li>
    <li><a href="#">tab3</a></li>
    <li><a href="#">tab4</a></li>  
  </ul>
</div>
<br>
Hello