html - not - tooltip bootstrap 4
Pestañas de ancho completo utilizando Bootstrap(compatibilidad con IE) (7)
Estoy tratando de ajustar las pestañas de Bootstrap para que abarquen todo el ancho de su contenedor. Aquí está mi código (un ejemplo de trabajo mínimo):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Full Width Tabs using Bootstrap</title>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<style>
.full-width-tabs > ul.nav.nav-tabs {
display: table;
width: 100%;
table-layout: fixed; /* To make all "columns" equal width regardless of content */
}
.full-width-tabs > ul.nav.nav-tabs > li {
float: none;
display: table-cell;
}
.full-width-tabs > ul.nav.nav-tabs > li > a {
text-align: center;
}
</style>
</head>
<body>
<div class="tabbable full-width-tabs">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab-one" data-toggle="tab">Tab 1</a></li>
<li><a href="#tab-two" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-one">
I''m in Tab 1.
</div>
<div class="tab-pane" id="tab-two">
Howdy, I''m in Tab 2. Howdy, I''m in Tab 2. Howdy, I''m in Tab 2. Howdy, I''m in Tab 2.
</div>
</div>
</div> <!-- /tabbable -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</body>
</html>
Obtengo este resultado (no deseado):
Sin embargo, quiero que las "cabeceras" de la pestaña abarquen todo el ancho del contenedor de la pestaña, y que distribuyan sus anchos individuales de manera uniforme, algo así como el resultado deseado :
¿Cómo logro eso?
Actualización 1: Aquí hay un JSFiddle: http://jsfiddle.net/agib/FZy4n/
Actualización 2: ya tenía un widget que funciona con javascript personalizado. Sin embargo, estoy buscando una solución que se integre aparentemente con Bootstrap y, por lo tanto, se base solo en el javascript estándar de Bootstrap.
Actualización 3: Si elimino / comento
/* table-layout: fixed; */
los anchos del encabezado están ocupando todo el espacio horizontal según sea necesario. Sin embargo, sus anchos son el resultado de la longitud de los textos de encabezado y, por lo tanto, no están distribuidos uniformemente.
Esto no es lo que quiero tampoco:
Actualización 4: El próximo Bootstrap 3 parece tener pestañas de ancho completo como componente estándar utilizando la clase .nav-justified : Bootstrap 3 -> Navs -> Justified nav
Intente esto, para todas las ''.nav-pills'' y cada elemento ''li'' dentro con doble bucle.
function(){
$(''.nav.nav-tabs'').each(function(){
var liGroup = $(this).children(''li'');
var liLength= liGroup.length;
liGroup.each(function(){
var liWidth = 100/liLength-1;
$(this).css({''min-width'': liWidth+''%'',''margin-left'':''0px'',''margin-right'':''0px''});
});
});}
Pruebe esta solución, solo una línea de código para lograrlo.
.full-width-tabs > ul > li { width: 100%; }
Hará que las pestañas abarquen todo el ancho de su contenedor.
Mira jsfiddle: http://jsfiddle.net/BhGKf/
Puedes usar javascript y jquery.
Sobre la base de la respuesta de Nick Bull anterior, puede determinar dinámicamente el número de pestañas en la página utilizando Jquery.
Prueba esto en tu página html.
<script type="text/javascript">
$(document).ready(function() {
var numTabs = $(''.nav-tabs'').find(''li'').length;
var tabWidth = 100 / numTabs;
var tabPercent = tabWidth + "%";
$(''.nav-tabs li'').width(tabPercent);
});
</script>
Sencillo:
.nav-tabs > li {
/* width = (100 / number of tabs). This example assumes 3 tabs. */
width:33.33333%;
}
¡Espero que ayude!
Tal vez haya encontrado su solución:
Crea esa clase con css:
.take-all-space-you-can{
width:100%;
}
Y luego aplique esa clase a sus etiquetas li en su ul . Haciendo esto, todos los li toman el espacio que pueden y automáticamente dividen el espacio en una sola fila.
Tratar
.nav-tabs > li {
float:none;
display: table-cell;
width: 1%;
}
Twitter Bootstrap 3 contiene una clase para esto, la clase con nav-justified .
Úsalo así:
<ul class="nav nav-tabs nav-justified">
<li><a href="#">Foo</a></li>
<li><a href="#">Bar</a></li>
</ul>