1479 sujets

Web Mobile et responsive web design

Zoom et Alignement des cartes et des badges

Bonjour, je viens de débuter sur Bootstrap et je rencontre un problème sur mon navigateur, en effet je souhaiterai lorsque qu'on effectue un zoom avant, que le badge "panier" se situe en bas de la 1ère carte de la page à gauche ( sauf que dans mon cas, le badge apparaît en dessous du badge produit). Aussi je voudrais, que la 2ème carte soit aligné côte à côte (avec une certain espace) avec la 3ème carte. Comment dois-je procéder ? Merci d'avance.

Lien de ma maquette (
https://cdn.discordapp.com/attachments/778294988538380339/801395511085105152/2021-01-20_11h19_22.png
)





HTML (dossier jsp)
[code=html] 

<!DOCTYPE html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="css/style4.css" rel="stylesheet" type="text/css"/>
    <title> Page Panier </title>
</head>
<!---Navigation-->
<c:import url="WEB-INF/menu/menu-main.jsp" />
<div id ="container-fluid">
    <div class="row">
        <div class="col"> <h2 class="text-center"> <span class ="badge badge-light header border border-dark entete "> Page Commande</span> </h2> </div> 
    </div>
    <div class="row">
        <div class="col-lg ml-5"> <h2> <span class ="badge badge-light header border border-dark produit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Produit&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span> </h2>
          </div>
        <div class="col-lg xl-6 md-5 offset-md-4"> <h2> <span class ="badge badge-light header border border-dark panier "> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;Panier&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>  </h2>
        </div>
        </div>
   
</div>
    <div class="row">
        <div class="col-lg mt-4 ml-5 md-3 sm-5">
            <div class="card" style="width: 18rem">
                <h5 class="card-title" align="center">Iphone 8</h5>
                <img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoB4fqc3ww1_YdEyiLyFnyUTy8lpJjhp48JeG6pZr3WI4TaF9Gj0Npttz_Jmhie7lBs7jkruaW&usqp=CAc" class="card-img-top" alt="Iphone 8" alt="Card image cap">
                <div class="card-body">
                    <p class="card-text" align="center"> Couleur:</p>
                    <p class="card-text" align="center"> Espace de stockage:</p>
                    <p class="card-text" align="center"> Taille de l'écran:</p>
                    <center> <button type="button" class="btn btn-success text-dark btn-lg b1" type="submit"> Ajouter au panier </button> </center>
                </div>
            </div>
        </div>
   
        <div class="col-lg-4 mt-4 ml-5 md-2 sm-6">
            <div class="card" style="width: 18rem">
                <h5 class="card-title" align="center">Iphone 8</h5>
                <img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRvOYMW07wpx1mRqo1sWZmvl79PdUqcuuOTUr2InVCCwWOZjM_ljo5wedQVvdabGZpT-_DgX0k&usqp=CAc" class="card-img-top" class="card-img-top" alt="Iphone 8" alt="Card image cap">
                <div class="card-body">
                    <p class="card-text" align="center"> Couleur:</p>
                    <p class="card-text" align="center"> Espace de stockage:</p>
                    <p class="card-text" align="center"> Taille de l'écran:</p>
                    <center> <button type="button" class="btn btn-danger text-dark btn-lg b1" type="submit">  Valider </button> </center>
                </div>
            </div>
            <br>
            <div class="card" style="width: 18rem">
                <h5 class="card-title" align="center">Iphone 8</h5>
                <img class="card-img-top" src="https://www.carrefour.fr/media/1500x1500/Photosite/EPCS/RADIOTELEPHONIE/0194252121993_PHOTOSITE_20201119_124715_0.jpg?placeholder=1" class="card-img-top" alt="Image">
                <div class="card-body">
                    <p class="card-text" align="center"> Couleur:</p>
                    <p class="card-text" align="center"> Espace de stockage:</p>
                    <p class="card-text" align="center"> Taille de l'écran:</p>
                    <center> <button type="button" class="btn btn-danger text-dark btn-lg b1" type="submit">  Retiter </button> </center>
                </div>




    </div>
</div>
<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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>


CSS
[code=css]


::before,
::after {
  box-sizing: border-box; // 1
}
body, #articles{
background-color:#08A326;
 overflow-x:hidden;
 margin: 0 auto;
}

h5 {
font-weight:bold;

}
.card-text {
font-size:24px;
}
.container-fluid {
    /* On ajoute une marge sur les cotés de l'écran */
    padding-right: 15px;
    padding-left: 15px;

    /* Et on centre */
    margin-right: auto;
    margin-left: auto;
}

/* Sur les grands écrans, on limite la largeur du contenu */
@media (min-width: 1200px){
    .container {
        width: 1170px;
    }
}
Modérateur
Bonjour,

TheHawks a écrit :
Bonjour, je viens de débuter sur Bootstrap

T'as pas fini de souffrir.

TheHawks a écrit :
... je souhaiterai lorsque qu'on effectue un zoom avant, que le badge "panier" se situe en bas de la 1ère carte de la page à gauche ( sauf que dans mon cas, le badge apparaît en dessous du badge produit). Aussi je voudrais, que la 2ème carte soit aligné côte à côte (avec une certain espace) avec la 3ème carte. Comment dois-je procéder ? Merci d'avance.

Le problème, c'est que ton html n'est pas bon. Les badges "Produits" et "Panier" devraient être dans les blocs juste au dessus des <div> de classe "card".

Et pour les 2e et 3e cartes, il faut les réunir dans un bloc intermédiaire de classe "row" qui aura 2 colonnes (les 2e et 3e cartes), et donc mettre "Panier" juste au dessus de ce bloc intermédiaire.

Amicalement,

PS:
1) tu peux supprimer tes <br> et tes &nbsp;. Ils ne servent à rien (si vraiment tu as besoin de rajouter des espaces, il faut utiliser les styles css.
2) tu ne dois pas utiliser la balise <center>. Là-aussi, il faut utiliser les styles css ou les classes bootstrap pour centrer tes contenus.
Modifié par parsimonhi (24 Feb 2021 - 13:56)
Sujet clos
Aller à