Je dois aligner 3 onglets de bootstrap à droite au lieu de gauche.
Est-ce possible avec l'utilisation de Bootstrap CSS ou dois-je utiliser des CSS personnalisés?
Utilisez la classe .navbar-right
pour pousser un élément vers la droite dans une barre de navigation ou .pull-right
pour faire la même chose lorsque vous n'êtes pas dans une barre de navigation.
<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>
Il est bon de connaître les autres classes d’aide ici aussi: http://getbootstrap.com/css/#helper-classes
utilisez la classe 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>
Utiliser .pull-right fait cela, c'est indésirable:
Ce que vous voulez, c'est ceci:
Vous devez ajuster certaines choses:
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;
}
Je sais que c'est un ancien post, mais la solution est simple:
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>
Si quelqu'un ici cherche une réponse en utilisant bootstrap 4 :
Vous pouvez ajouter ml-auto
à l'onglet que vous voulez pousser à droite
<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>
Créez une nouvelle classe pour alignement à droite et utilisez ci-dessous 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>
Pour utiliser des onglets alignés à droite, ajoutez simplement .text-right
à la classe .nav-tabs
.
<ul class="nav nav-tabs text-right nav-tabs-highlight ">
Balexandre a déjà décrit une solution simple et efficace:
Aligne une barre de navigation bootstrap à droite
.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>
(pas que les onglets sont ordonnés en sens inverse)