J'essaie de créer une mise en page de carte bootstrap comme celle-ci dans une rangée:
Voici ce que j'ai essayé jusqu'à présent :
<div class="row"> <div class="col-lg-3"> </div> <div class="col-lg-3"> </div> <div class="col-lg-9"> </div> </div>
Cela donne quelque chose comme ceci:
Tout le monde avez des idées? Merci d'avance! :)
BTW * J'utilise Bootstrap 4.
3 Réponses :
Je ferais quelque chose comme ça dans Bootstrap 4:
<div class="row"> <div class="col-lg-3"> <div class="row"> <p>Col-lg-3</p> </div> <div class="row"> <p>Col-lg-3</p> </div> </div> <div class="col-lg-9"> <p>Col-lg-9</p> </div> </div>
Vous pouvez essayer comme ceci ...
<div class="row"> <div class="col-lg-3"> <div class="row"> <div class="col-12"> </div> <div class="col-12"> </div> </div> </div> <div class="col-lg-9"> </div> </div>
Veuillez essayer ceci
--- col-lg-3
---------- col-12 code >
---------- col-12
--- col-lg-9
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="row border border-black"> <div class="col-3 h-auto"> <div class="row h-100"> <div class="col-12 border border-dark text-center my-auto"><h6>col-lg-3</h6></div> <div class="col-12 border border-dark text-center my-auto"><h6>col-lg-3</h6></div> </div> </div> <div class="col-9 h-auto border border-dark"><h6 class="h-100 d-flex align-items-center">col-lg-9</h6></div> </div>
votre problème est-il résolu?