Estoy implementando un menú (nav pills) mediante bootstrap. Lo he instalado mediante CDN, además, he descargado los archivos al localhost por si hubiere cualquier problema con el servicio de Bootstrap. El problema es que no carga las clases nativas de bootstrap para "nav nav-pills". Podría ser problema en la ruta (localhost) dónde realizo la llamada a los archivos de bootstrap, pero lo dudo porque he creado otro archivo css y me lo aplica sin problemas.
Aquí tengo mi índex.php
Código:
y aquí menu_nav.php<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Gestión de apoyo operativo a servicios</title> <!-- Link a la última versión compilada de bootstrap (versión .min.) [Servidor externo] --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <!-- Link a la última versión compilada de bootstrap (versión .min.) [Alojado] --> <link rel="STYLESHEET" type="text/css" href="bootstrap/dist/css/bootstrap.min.css"> <!-- Link al anexo de estilos propios NO Bootstrap--> <link rel="STYLESHEET" type="text/css" href="css/estilos.css"> </head> <body> <?php require("header.php"); require("menu_nav.php"); require("app.php"); require("footer.php"); ?> <!-- Link a jQuery, Popper.js, Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <!-- Insertamos última versión compilada de JavaScript (versión .min.) [Alojado] --> <script src="bootstrap/dist/js/bootstrap.min.js"></script> </body> </html>
Código:
Alguna sugerencia? <!-- MENÚ DE NAVEGACIÓN--> <div id="navegacion" class="container"> <div class="row"> <div id="menu_nav" class="col-md-12" "> <ul class="nav nav-pills nav-justified"> <li class="active"><a href="#">Inicio</a></li> <li><a href="#">Perfil</a></li> <li><a href="#">Mensajes</a></li> </ul> </div> </div> </div>
Un saludo!