Как выровнять вкладки вверх/вправо в начальной загрузке 3?

Ответ 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

Ответ 2

используйте класс pull-right:

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

Ответ 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;
}

Ответ 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>

Ответ 5

Создайте новый класс для выравнивания справа и используйте ниже css.

/* overwrite boostrap */

.nav>li {
  float: none!important;
  display: inline-block!important;
}
/* new class */

.nav-tabs-right {
  text-align: right;
  font-size: 0;
  /* prevent floated child bug */
}
.nav-tabs-right>li {
  display: inline-block;
  clear: left;
  float: none;
  text-align: right;
  font-size: 12px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container jumbotron">

  <ul class="nav nav-tabs nav-tabs-right">
    <li class="active">
      <a data-toggle="tabs" href="#tab-1">Tab 1</a>
    </li>
    <li>
      <a data-toggle="tabs" href="#tab-2">Tab 2</a>
    </li>
  </ul>

</div>

Ответ 6

В случае, если кто-то здесь ищет ответ, используя 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>

Документы по начальной загрузке: авто-поля

Ответ 7

Чтобы использовать правильно выровненные вкладки, просто добавьте .text-right в класс .nav-tabs.

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

Ответ 8

Очень простое и хорошее решение уже описано здесь balexandre:

Выровняйте навигационную панель вправо

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<h2>Bootstrap tab aligned right</h2>
<ul class="nav nav-tabs right-to-left">
  <li role="3" class="active"><a href="#">Tab 3</a></li>
  <li role="2"><a href="#">Tab 2</a></li>
  <li role="1"><a href="#">Tab 1</a></li>
</ul>

Ответ 9

Вы также можете переопределить свой контейнер

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

Запишите это в некоторый файл css.

.someclassintabscontainer .nav-tabs > li {
    float: right;
}

Ответ 10

Добавить класс justify-content-end

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