如何在自举3中将标签对齐到顶部/右侧？

Question

我需要将bootstrap 3选项卡对齐而不是左对齐.

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

Answer 1

使用类.navbar-right将元素推送到导航栏中的右侧,或者.pull-right在不在导航栏中时执行相同操作.

<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>

很高兴知道其他帮助程序类:http://getbootstrap.com/css/#helper-classes

Answer 2

使用右拉类:

<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>

Answer 3

使用.pull-right执行此操作,这是不可取的:

你想要的是这个:

你需要调整一些东西:

http://jsbin.com/zuxol/1/

HTML

  <div class="right-tabs clearfix">
<ul class="nav nav-tabs">
  <li class="active"><a href="#tab_a" data-toggle="tab">Tab A</a></li>
  <li><a href="#tab_b" data-toggle="tab">Tab B</a></li>
  <li><a href="#tab_c" data-toggle="tab">Tab C</a></li>
  <li><a href="#tab_d" data-toggle="tab">Tab D</a></li>
</ul>
<div class="tab-content">
        <div class="tab-pane active" id="tab_a">
            <h4>Pane A</h4>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.</p>
        </div>
        <div class="tab-pane" id="tab_b">
            <h4>Pane B</h4>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.</p>
        </div>
        <div class="tab-pane" id="tab_c">
            <h4>Pane C</h4>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.</p>
        </div>
        <div class="tab-pane" id="tab_d">
            <h4>Pane D</h4>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.</p>
        </div>
</div><!-- tab content -->

</div><!-- end right-tabs -->  

CSS

.right-tabs .nav {
    float: right;
    border-bottom: 0px;
}
.right-tabs .nav li { float: left }
.right-tabs .tab-content {
    float: left;
    border-top: 1px solid #ddd;
    margin-top: -1px;
}

Answer 4

我知道这是一个老帖子,灵魂如何简单:

CSS

.nav-rtl {
    padding-left:40px;
    padding-right:0px;
}

.nav-rtl li {
    float:right;
}

HTML

<ul class="nav nav-tabs nav-rtl" role="tablist">
    <li ..... ></li>
    <li ..... ></li>  // an so on
</ul>

Answer 5

如果有人正在使用bootstrap 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>

引导文档：自动边距