Bonjour 
Je suis en train de faire un cours bootstrap que j'ai acheté sur Elephorm:
J'en suis à l'utilisation des préfixes xs-sm-md-lg...
Et j'ai un petit problème de "comportement" ma "sidebar" devrait passer en dessous lorsque je suis en écran "mobile"... Mais elle perciste et reste sur le coté...
J'ai bien l'impression d'avoir fait à la lettre comme sur la vidéo mais mon résultat ne donne pas ce que donne la vidéo...
image de la vidéo et du résultat voulu:
Ici le code donné par le formateur: ( sur la capture d'écran, il est en train de modifier la div sidebar col-md-4 en col-xs-4 j'ai pas pu capturer le code définitif car il est caché par une annotation).
et mon code... ou il y a peut être une erreur qui m'aveugle depuis hier soir????
Merci si vous pouvez m'éclairer
Je suis en train de faire un cours bootstrap que j'ai acheté sur Elephorm:
J'en suis à l'utilisation des préfixes xs-sm-md-lg...
Et j'ai un petit problème de "comportement" ma "sidebar" devrait passer en dessous lorsque je suis en écran "mobile"... Mais elle perciste et reste sur le coté...
J'ai bien l'impression d'avoir fait à la lettre comme sur la vidéo mais mon résultat ne donne pas ce que donne la vidéo...
image de la vidéo et du résultat voulu:
Ici le code donné par le formateur: ( sur la capture d'écran, il est en train de modifier la div sidebar col-md-4 en col-xs-4 j'ai pas pu capturer le code définitif car il est caché par une annotation).
et mon code... ou il y a peut être une erreur qui m'aveugle depuis hier soir????
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="dist/css/main.css"/>
<title> Cours Bootsrap Elephorm !!</title>
</head>
<body>
<div class="container">
<div id="site" class="row">
<div id="content" class="col-xs-8">
<div class="row">
<div class="col-xs-6 col-md-12">
<h2>Titre 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi vero eius, dolor atque. Quaerat repellendus fugiat, in nulla fuga adipisci corporis amet libero, ducimus. Vitae quaerat voluptas, facere. Neque, possimus.</p>
<div class="col-md-6">
<a href="#">Commentaires (23)</a>
</div>
<div class="col-md-6">
<a href="#"> Lire La Suite</a>
</div>
</div>
<div class="col-xs-6 col-md-12">
<h2>Titre 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt eligendi cupiditate quaerat aliquid est beatae, similique vitae minima voluptatum, repellendus commodi accusantium excepturi sequi, inventore expedita quis dolores molestias impedit!</p>
<div class="row">
<div class="col-md-6">
<a href="#">Commentaires (13)</a>
</div>
<div class="col-md-6">
<a href="#"> Lire La Suite</a>
</div>
</div>
</div>
</div><!--#row-->
</div><!--#content-->
<div id="sidebar" class="col-xs-4">
</div><!--#sidebar-->
</div><!--#site-->
</div><!--container-->
<script type="application/javascript" src="dist/js/jquery-2.1.3.min.js"></script>
<script type="application/javascript" src="dist/js/bootstrap.min.js"></script>
</body>
</html>Merci si vous pouvez m'éclairer
Dernière édition:
