Bootstrap navbar reste en version portable
Bonjour à tous,
Voila je rencontre un petit problème avec mon code.
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<title>Test page</title>
</head>
<body>
<nav class="navbar navbar-expand-md bg-inverse navbar-inverse fixed-top">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-label="Toggle navigation" aria-expanded="false"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Accueil<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">La Carte</a>
</li>
<li class="nav-item hidden-md-up">
<a class="nav-link" href="#">Livre d'Or</a>
</li>
<li class="nav-item hidden-md-up">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
<a class="navbar-brand" href="#"><img src="Capture d’écran 2017-05-09 à 15.13.24.png" width="30" height="30" class="d-inline-block align-top" alt="">Brand</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Livre d'Or</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="d-flex align-items-center bg-primary text-center h-100">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="display-1 text-white">COVER</h1>
<p class="lead text-white">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
</div>
</div>
</div>
</div>
<div class="py-5 section">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 class="text-primary">HEADING</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. </p>
</div>
<div class="col-md-6">
<img src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" class="img-fluid"> </div>
</div>
</div>
</div>
<div class="py-5 section">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" class="img-fluid img-thumbnail"> </div>
<div class="col-md-6">
<h1 class="text-primary">HEADING</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. </p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.min.js"></script>
</body>
</html>J'utilise pingendo pour gagner du temps et mettre en place une structure a l'aide du framework bootstrap. Sur pingendo, le code ci dessus remplace la nav bar par un toggle bouton uniquement pour les mobiles.
Sauf que lorsque j'upload le code sur mon serveur 1&1, le code s'interprete mal. Sur un pc, la navbar apparait comme sur un portable avec le toggler. De plus, il n'y a que deux item qui apparaissent.
On dirai que le system de grille est interprété que de facon partiel.
J'ai pourtant inserer les cdn du css bootstrap, le jquery et en dernier le java.
Merci par avanace de votre aide ;)
4 réponses
Bonjour,
Merci pour vos réponses.
Le probleme venez du code scss. J'avais mis le fichier sur le serveurs mais il fallait mettre sa transposition en css...
Le probleme est donc résolu ;)
Salut,
Premièrement il s'agit de JavaScript et non de Java.
Ensuite, si tu passes par un éditeur WYSIWYG pour créer ton contenu HTML, il est fort possible qu'il y ait des bugs au niveau du code généré, ci qui est apparemment le cas : tu as deux éléments HTML ayant pour id navbarSupportedContent, or un id doit être UNIQUE ( c'est le principe d'un id). Je pense que le souci se situe à ce niveau là ;)
Salut betaWeb,
Tout d'abord merci de ta réponse et tes précisions. J'ai bien corrigé l'erreur de l'id mais toujours pas de changement. Je m'y connais peu au niveau serveur mais est ce que cela peut venir d'un blocage sur les cdn au niveau de 1&1 ?
Merci