Tabs 如何在bootstrap 3中将选项卡与上/右对齐？

我需要将引导3个选项卡向右对齐，而不是向左对齐

---

是否可以使用引导css或我需要使用自定义css？

使用类

.navbar right

将元素推到navbar中的右侧，或者

将元素推到不在navbar中的右侧

<ul class="nav nav-tabs navbar-right">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Tab1</a></li>
    <li><a href="#">Tab2</a></li>
</ul>







很高兴了解这里的其他帮助程序类：
使用。向右拉可以做到这一点，这是不可取的：


你想要的是：

你需要调整一些东西：


HTML

我知道这是一篇古老的帖子，不管这个问题多么简单：

CSS

.nav rtl{
左侧填充：40px；
右边填充：0px；
}
李国荣先生{
浮动：对；
}

HTML



//安苏

为右对齐创建一个新类，并在css下方使用


/*覆盖boostrap*/
.nav>li{
浮动：无！重要；
显示：内联块！重要；
}
/*新类*/
.导航标签右侧{
文本对齐：右对齐；
字号：0；
/*防止浮动子错误*/
}
.导航选项卡右侧>左侧{
显示：内联块；
清除：左；
浮动：无；
文本对齐：右对齐；
字体大小：12px；
}







使用向右拉类：

<ul class="nav nav-tabs">
    <li class="active pull-right"><a href="#">Home</a></li>
    <li class="pull-right"><a href="#">Tab1</a></li>
    <li class="pull-right"><a href="#">Tab2</a></li>
</ul>






要使用右对齐选项卡，只需将
.text right
添加到
.nav tabs
类中即可

<ul class="nav nav-tabs text-right nav-tabs-highlight ">


您也可以通过容器覆盖

<div class="someclassintabscontainer">
<!-- Here the tabs code writed normaly -->
</div>

添加类内容结束

<ul class="nav nav-tabs justify-content-end" role="tablist">
</ul>



balexandre在这里已经介绍了一个非常简单和好的解决方案：



。从右到左li{
浮子：对！很重要；
}

引导选项卡右对齐




以防有人在这里使用引导程序4寻找答案：

您可以将
ml auto
添加到要向右推的选项卡

<ul class="nav nav-tabs small" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#first" role="tab">First</a>
    </li>
    <!-- .ml-auto: adds margin to the left of this tab, all tabs behind this one, are pushed to the right -->
    <li class="nav-item ml-auto"> 
        <a class="nav-link" data-toggle="tab" href="#second" role="tab">Second</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#third" role="tab">Third</a>
    </li>
</ul>










此外，引导选项卡不会折叠成手风琴，您可能想了解一下：这正是我来这里的目的。谢谢，谢谢♥只要在
@eladcm正确后立即添加
，就可以正常工作-只需添加新类并设置
。nav rtl li
到
浮动：对
-顺便说一句：@Christina对堆叠到手风琴有很好的评论。对我来说，它使文本浮动到屏幕的右边缘，似乎有点破损此外，它还将页面的其余部分水平向下推。-我希望它在页面的右上角，不管还有什么。最简单的解决方案！它甚至在不破坏对齐的情况下显示所有边框。但是它颠倒了选项卡的顺序（tab2、tab1和home是最右边的）。这很有帮助，谢谢。我想知道，如何将标题放在拉动的右侧导航标签的最左侧？感谢您节省我的时间是的，为我工作（右侧所有标签加边框正确）-但不明白为什么。。。正在寻找另一种解决方案。找到
justify content end
，必须在
ul
@SarahTrees上添加which。你应该把它作为一个答案发布——这是唯一对我有效的东西。
.someclassintabscontainer .nav-tabs > li {
    float: right;
}

<ul class="nav nav-tabs justify-content-end" role="tablist">
</ul>

<ul class="nav nav-tabs small" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#first" role="tab">First</a>
    </li>
    <!-- .ml-auto: adds margin to the left of this tab, all tabs behind this one, are pushed to the right -->
    <li class="nav-item ml-auto"> 
        <a class="nav-link" data-toggle="tab" href="#second" role="tab">Second</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#third" role="tab">Third</a>
    </li>
</ul>