Sujet Précédent Sujet Suivant

Carousel et navbar qui ne fonctionnent pas BOOTSTRAP 4

Résolu/Fermé
aqwxszedcvfrtgbnhyuj Messages postés 14 Date d'inscription dimanche 19 juillet 2015 Statut Membre Dernière intervention 26 décembre 2018 - 26 déc. 2018 à 10:41
 anas - 7 févr. 2019 à 12:50
Bonjour,
Je développe un site à l'aide de Bootstrap 4. Cependant, j'ai quelques soucis au niveau de mon carousel et de ma navbar.
Voilà ce que cela donne sur mon site :



J'ai bien intégré mon bloc javascript avant celui de stylesheet dans mon fichier de template (en twig car je fais du symfony) 


{% block javascripts %}
    <script src="{{asset('/js/bootstrap.min.js')}}"></script>
    {% endblock %}
    {% block stylesheets %}
    <link rel="stylesheet" href="{{asset('/css/style.css')}}">
    <link rel="stylesheet" href="{{asset('/css/bootstrap.min.css')}}">
    {% endblock %}



Merci d'avance
A voir également:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
26 déc. 2018 à 12:36
Bonjour,
- As tu chargé jquery avant bootstrap ?
- As tu vidé le cache de ton navigateur ?
- As tu vérifié (en utilisant la console du navigateur et en faisant "examiner l'élément") que le JS appliqué à ta navbar est le bon ? (et donc que le chemin vers tes fichiers css / js sont bien pris en compte) ?

par ce que.. bon.. la... comme ça... ça va nous être difficile de te répondre....

0
aqwxszedcvfrtgbnhyuj Messages postés 14 Date d'inscription dimanche 19 juillet 2015 Statut Membre Dernière intervention 26 décembre 2018
26 déc. 2018 à 12:42
Merci de votre réponse

J'ai inclus bootstrap.min.js car dans la doc officielle, il est écrit que les plugins peuvent être intégrés de façon individuelle ou tous d'un coup grâce à ce fichier

Je vide le cache à chaque fois que je fais des modif dans mon code

Voilà les erreurs dans la console du naviateur (erreur que je ne comprends pas compte tenu de ce qui est écrit dans la doc de bootstrap)

0
aqwxszedcvfrtgbnhyuj Messages postés 14 Date d'inscription dimanche 19 juillet 2015 Statut Membre Dernière intervention 26 décembre 2018
26 déc. 2018 à 12:45
si je rajoute malgré tout jquery: 
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin="anonymous"></script>


j'obtiens ça :

0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
26 déc. 2018 à 13:41
Le premier message.. le favicon.. on s'en fou.
Le second, par contre, semble indiquer un souci.

As tu bien placé tout ton JS à la fin de ta page ? (avant le </body> )
0
aqwxszedcvfrtgbnhyuj Messages postés 14 Date d'inscription dimanche 19 juillet 2015 Statut Membre Dernière intervention 26 décembre 2018
26 déc. 2018 à 14:01
oui, voilà on code :

0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
26 déc. 2018 à 14:11
Il faudrait nous donner le code complet de ta page généré (c'est à dire en faisant afficher la source depuis ton navigateur internet).
Il faudrait également une capture écran de ta console complète.
0
Réponse 2 / 2
aqwxszedcvfrtgbnhyuj Messages postés 14 Date d'inscription dimanche 19 juillet 2015 Statut Membre Dernière intervention 26 décembre 2018
26 déc. 2018 à 18:25
J'ai résolu le souci du carousel grâce à ce site

https://stackoverflow.com/questions/29027830/getting-cannot-read-property-offsetwidth-of-undefined-with-bootstrap-carousel

Mais toujours pas la navbar...
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
26 déc. 2018 à 19:06
Pour moi tout y est 

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title> ACCUEIL - PROSTAGE </title>

<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
</head>

<body>
<div class="container-fluid">

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="/img/slider1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/img/slider2.jpg" alt="Second slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="">ProStage</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>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/formations">Formations <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/entreprises">Entreprises</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/formations">Formations <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/entreprises">Entreprises</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="align-right">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

<H1>Bienvenue sur ProStage </H1>

--- le footer --- 
</div>
<div id="sfwdt373850" class="sf-toolbar sf-display-none"></div>
<script nonce="3ebf0cb1cad73c6af627e8b38c83efa9"> </script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>


</body>
</html>

par contre, j'ai inclus Bootstrap depuis le CDN... donc si ça se trouve le chemin vers tes fichiers n'est pas bon...
J'ai également placé TOUT les SCRIPTS à la fin... avant le </body> .... chose que tu n'avais visiblement pas fait...

Ah.. et comme je n'ai pas ton CSS... il se peut aussi que ça soit lui qui te pose problème...
0
aqwxszedcvfrtgbnhyuj Messages postés 14 Date d'inscription dimanche 19 juillet 2015 Statut Membre Dernière intervention 26 décembre 2018
26 déc. 2018 à 21:06
YES PARFAIT

j'ai rajouté 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

et du coup tout marche, merci beaucoupppp
0
anas
7 févr. 2019 à 12:50
ohh merci ca marche pour moi aussi
0

Discussions similaires

À quoi sert le port common interface 5v only Samsung ?
zharg -
Reguletout -

29 réponses
Disque dur qui ne boot pas: no boot disk has been detected...
Utilisateur anonyme -
Utilisateur anonyme -

9 réponses
minimal bash-like line editing is supported
Mass -
brucine -

1 réponse