Je suis en train d'enseigner moi-même des langues Web et je suis un peu coincé sur mon code bootstrap / html. Actuellement, je rencontre des problèmes avec Bootstrap. J'essaie de faire une barre NAV et j'ai copié le code que j'ai trouvé en ligne et collé sur Atom, puis a exécuté le site local.
Voici le code P>
<!DOCTYPE html>
<html lang="en">
<head>
<title>testing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapse button -->
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="\Users\sealc\.atom\Web Dev\testing\pagethree.html">page three</a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\sealc\.atom\Web Dev\testing\pagetwo.html">Page two</a>
</li>
<li class="nav-item">
<a class="nav-link" href="C:\Users\sealc\.atom\Web Dev\testing\pagefour.html">Page four</a>
</li>
</ul>
<!-- Links -->
</div>
<!-- Collapsible content -->
</nav>
</body>
</html>
3 Réponses :
Vérifiez le conflit quelque chose comme:
Combien de résoudre:
Essayez de commenter d'autres .js et courez pour vérifier la cause. P> peut également vérifier également vos .CSS à l'aide d'un élément d'inspection. P> En forçant le style que vous voulez ou à passer l'ancien CSS, vous pouvez ajouter dans votre style Comme par exemple: p> .jsfile code> que vous utilisez?
Si vous avez une page maître code>, je suppose que c'est la cause. (Cause par les autres pages) p> ! important code> à la zone touchée. p> <style>
.sampleclass{
color: red !important
}
</style>
Bonjour @jacob Dubois J'ai vérifier votre code. Votre code est parfait mais Bootstrap CSS a un problème. Veuillez utiliser cette dernière version de bootstrap. Par exemple: =>
J'ai testé votre code sur mon environnement, le lien pourrait ne pas fonctionner. J'ai changé le lien et ça a fonctionné à nouveau. Ici, il est:
Vous avez inclus Bootstrap 3.x sur l'en-tête, mais le code que vous avez appartient à BOOTSTRAP 4 . Est-ce correct?