- Nav-pills se usa para fines de menú en Bootstrap 4 para navegación basada en etiquetas.
- Es posible justificar las píldoras de navegación con Bootstrap 4 siguiendo el siguiente enfoque.
Enfoque 1:
- Para justificar las píldoras de navegación con Bootstrap 3, la clase de justificación de navegación está disponible, pero en Bootstrap 4 las clases de relleno de navegación o justificación de navegación están disponibles de manera predeterminada
- Agregue class nav-fill o nav-justified a la etiqueta de navegación o al elemento de navegación.
- La diferencia entre nav-fill y nav-justified es que la clase nav-fill proporciona un espacio desigual para el elemento de la píldora de navegación en función de la longitud de su nombre. pero justificados por navegación igualan la píldora de navegación espacial entre sí.
Ejemplo 1: El siguiente ejemplo ilustra cómo justificar las píldoras de navegación con Bootstrap 4 usando la clase nav-fill o nav-justified.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<center>
<h1 style="color:green;padding:13px;">
GeeksforGeeeks</h1>
<br>
<br>
<p>Nav Fill Unequal spatial of Nav Pills</p>
<br>
<nav class="nav nav-pills nav-fill">
<a class="nav-item nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Much longer nav link</a>
<a class="nav-item nav-link" href="#">Link</a>
<a class="nav-item nav-link disabled" href="#"
tabindex="-1" aria-disabled="true">
Disabled
</a>
</nav>
<br>
<p>Nav Justified -Equal spatial of Nav Pills</p>
<br>
<nav class="nav nav-pills nav-justified">
<a class="nav-item nav-link active" href="#">
Active
</a>
<a class="nav-item nav-link" href="#">
Much longer nav link
</a>
<a class="nav-item nav-link" href="#">
Link
</a>
<a class="nav-item nav-link disabled" href="#"
tabindex="-1" aria-disabled="true">
Disabled
</a>
</nav>
</center>
</div>
<script>
$(document).ready(function () {
$('nav a').click(function () {
$('nav a').removeClass("active");
$(this).addClass("active");
});
});
</script>
</body>
</html>
Salida: 
Enfoque 2:
- Para justificar las píldoras de navegación con Bootstrap 4 usando flex, es decir, si la navegación está hecha con flex box.
- Agregue la clase flex-column y flex-sm-row a la etiqueta de navegación o al elemento de navegación.
- Este flex es de alguna manera similar a nav-fill por su espacial desigual de Nav Pills.
Ejemplo 2: El siguiente ejemplo ilustra cómo justificar las píldoras de navegación con Bootstrap 4 usando flex.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<center>
<h1 style="color:green;padding:13px;">
GeeksforGeeeks</h1>
<br>
<br>
<p>Using Flex -Unequal spatial of Nav Pills</p>
<br>
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active"
href="#">
Active
</a>
<a class="flex-sm-fill text-sm-center nav-link"
href="#">
Longer nav link
</a>
<a class="flex-sm-fill text-sm-center nav-link"
href="#">
Link
</a>
<a class="flex-sm-fill text-sm-center nav-link disabled"
href="#" tabindex="-1" aria-disabled="true">
Disabled
</a>
</nav>
</center>
</div>
<script>
$(document).ready(function () {
$('nav a').click(function () {
$('nav a').removeClass("active");
$(this).addClass("active");
});
});
</script>
</body>
</html>
Salida: 
Referencia: https://getbootstrap.com/docs/4.0/components/navs/
Publicación traducida automáticamente
Artículo escrito por VigneshKannan3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA