communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Comment puis-je modifier ces cartes pour qu'elles soient réactives avec Boostrap 4 ?
P粉509383150
P粉509383150 2024-04-05 10:48:45
0
1
4853

Comment faire en sorte que chaque row affiche 4 cartes et bien sûr les empiler si la taille de l'écran change. Idéalement, il devrait y avoir un espace entre eux. J'ai essayé toutes les combinaisons possibles que j'ai pu rechercher. 

#cardsContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow-y: scroll;
    overflow: hidden;
    height: 1200px;
  }

  .card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 16px;
    width: calc(25% - 16px);
    padding-bottom: 10px;
    font-size: 12px;
    border-radius: 5px !important;
    flex-basis: 25%;
    outline-width: 0px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    outline: none;
    border: none;
    border-radius: 7px;
  }

  /* Remove extra left and right margins, due to padding */
  .row {
    margin: 0 -5px;
  }

  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

  @media only screen and (max-width: 767px) {
    .card {
      width: 100%;
      margin-bottom: 10px;
    }
  }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<div id="cardsContainer">
  <div class="row">
    <div class="card-group">
      <div class="card">
        <div class="card-body">
          <form>
            <div class="form-group row">
              <div class="col-sm-6">
                <label for="quarter">Quarter:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="monthNum">Month:</label>
                <select class="form-control" value="2">
                  <option value="1">1</option>
                  <option value="2" selected="">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select></div>
              <div class="col-sm-6"><label for="weekNum">Week:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="date">Date:</label>
                <input type="date" class="form-control" value="2023-01-29"></div>
            </div>
            <div class="form-group"><label for="status">Status:</label>
              <select class="form-control" value="Planned">
                <option value="Planned" selected="">Planned</option>
                <option value="Published">Published</option>
                <option value="Cancelled">Cancelled</option>
              </select>
            </div>
            <div class="form-group img">
              <label for="status">Image URL:</label>
              <input type="text" class="form-control imgLink" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
              <a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
                <img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" class="card-img" height="190px">
              </a>
            </div>
            <div class="form-group">
              <label for="post">Post:</label>
              <textarea class="form-control post">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
            </div>
            <div class="form-group">
              <label for="publishedPostLink">Published Link:</label>
              <a href="https://posts.gdle/nTUL97" target="_blank">
                <input type="text" class="form-control" value="https://posts.glde/nTUL97"></a></div>
            <div class="form-group" hidden="">
              <label for="postNum">Post Number:</label>
              <input type="text" class="form-control" value="1">
            </div>
          </form>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <form>
            <div class="form-group row">
              <div class="col-sm-6">
                <label for="quarter">Quarter:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="monthNum">Month:</label>
                <select class="form-control" value="2">
                  <option value="1">1</option>
                  <option value="2" selected="">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select></div>
              <div class="col-sm-6"><label for="weekNum">Week:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="date">Date:</label>
                <input type="date" class="form-control" value="2023-01-29"></div>
            </div>
            <div class="form-group"><label for="status">Status:</label>
              <select class="form-control" value="Planned">
                <option value="Planned" selected="">Planned</option>
                <option value="Published">Published</option>
                <option value="Cancelled">Cancelled</option>
              </select>
            </div>
            <div class="form-group img">
              <label for="status">Image URL:</label>
              <input type="text" class="form-control imgLink" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
              <a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
                <img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" class="card-img" height="190px">
              </a>
            </div>
            <div class="form-group">
              <label for="post">Post:</label>
              <textarea class="form-control post">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
            </div>
            <div class="form-group">
              <label for="publishedPostLink">Published Link:</label>
              <a href="https://posts.glde/nTUL97" target="_blank">
                <input type="text" class="form-control" value="https://posts.glde/nTUL97"></a></div>
            <div class="form-group" hidden="">
              <label for="postNum">Post Number:</label>
              <input type="text" class="form-control" value="1">
            </div>
          </form>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <form>
            <div class="form-group row">
              <div class="col-sm-6">
                <label for="quarter">Quarter:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="monthNum">Month:</label>
                <select class="form-control" value="2">
                  <option value="1">1</option>
                  <option value="2" selected="">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select></div>
              <div class="col-sm-6"><label for="weekNum">Week:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="date">Date:</label>
                <input type="date" class="form-control" value="2023-01-29"></div>
            </div>
            <div class="form-group"><label for="status">Status:</label>
              <select class="form-control" value="Planned">
                <option value="Planned" selected="">Planned</option>
                <option value="Published">Published</option>
                <option value="Cancelled">Cancelled</option>
              </select>
            </div>
            <div class="form-group img">
              <label for="status">Image URL:</label>
              <input type="text" class="form-control imgLink" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
              <a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
                <img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" class="card-img" height="190px">
              </a>
            </div>
            <div class="form-group">
              <label for="post">Post:</label>
              <textarea class="form-control post">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
            </div>
            <div class="form-group">
              <label for="publishedPostLink">Published Link:</label>
              <a href="https://posts.dgle/nTUL97" target="_blank">
                <input type="text" class="form-control" value="https://posdts.gle/nTUL97"></a></div>
            <div class="form-group" hidden="">
              <label for="postNum">Post Number:</label>
              <input type="text" class="form-control" value="1">
            </div>
          </form>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <form>
            <div class="form-group row">
              <div class="col-sm-6">
                <label for="quarter">Quarter:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="monthNum">Month:</label>
                <select class="form-control" value="2">
                  <option value="1">1</option>
                  <option value="2" selected="">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select></div>
              <div class="col-sm-6"><label for="weekNum">Week:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="date">Date:</label>
                <input type="date" class="form-control" value="2023-01-29"></div>
            </div>
            <div class="form-group"><label for="status">Status:</label>
              <select class="form-control" value="Planned">
                <option value="Planned" selected="">Planned</option>
                <option value="Published">Published</option>
                <option value="Cancelled">Cancelled</option>
              </select>
            </div>
            <div class="form-group img">
              <label for="status">Image URL:</label>
              <input type="text" class="form-control imgLink" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
              <a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
                <img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" class="card-img" height="190px">
              </a>
            </div>
            <div class="form-group">
              <label for="post">Post:</label>
              <textarea class="form-control post">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
            </div>
            <div class="form-group">
              <label for="publishedPostLink">Published Link:</label>
              <a href="https://posts.gdle/nTUL97" target="_blank">
                <input type="text" class="form-control" value="https://posts.gle/ndTUL97"></a></div>
            <div class="form-group" hidden="">
              <label for="postNum">Post Number:</label>
              <input type="text" class="form-control" value="1">
            </div>
          </form>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <form>
            <div class="form-group row">
              <div class="col-sm-6">
                <label for="quarter">Quarter:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="monthNum">Month:</label>
                <select class="form-control" value="2">
                  <option value="1">1</option>
                  <option value="2" selected="">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select></div>
              <div class="col-sm-6"><label for="weekNum">Week:</label>
                <select class="form-control" value="1">
                  <option value="1" selected="">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                </select><label for="date">Date:</label>
                <input type="date" class="form-control" value="2023-01-29"></div>
            </div>
            <div class="form-group"><label for="status">Status:</label>
              <select class="form-control" value="Planned">
                <option value="Planned" selected="">Planned</option>
                <option value="Published">Published</option>
                <option value="Cancelled">Cancelled</option>
              </select>
            </div>
            <div class="form-group img">
              <label for="status">Image URL:</label>
              <input type="text" class="form-control imgLink" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
              <a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
                <img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" class="card-img" height="190px">
              </a>
            </div>
            <div class="form-group">
              <label for="post">Post:</label>
              <textarea class="form-control post">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
            </div>
            <div class="form-group">
              <label for="publishedPostLink">Published Link:</label>
              <a href="https://posdts.gle/nTUL97" target="_blank">
                <input type="text" class="form-control" value="https://posts.dgle/nTUL97"></a></div>
            <div class="form-group" hidden="">
              <label for="postNum">Post Number:</label>
              <input type="text" class="form-control" value="1">
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

P粉509383150
P粉509383150

répondre à tous(1)
P粉677573079
P粉6775730792024-04-06 00:53:11 1 plancher

Veuillez lire la Documentation Bootstrap sur les classes réactives, je les ai utilisées (col-md-6) dans ce code pour afficher deux cartes à partir de la tablette et 4 cartes sur des écrans plus grands (col-xl-3)

Poésie. J'ai nettoyé le code et ajouté une méta-fenêtre, ce qui est important pour la visualisation mobile ! 

#cardsContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow-y: scroll;
    overflow: hidden;
    /*height: 1000px; WHY?*/
  }

  .card {;
    font-size: 12px;
    border-radius: 5px !important;
    flex-basis: 25%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    outline: none;
    border: none;
    border-radius: 7px;
    flex-direction: inherit!important;
  }

  /* .row {
    margin: 0 -5px;
  }
  .row:after {
    content: "";
    display: table;
    clear: both;
  } */

  @media only screen and (max-width: 767px) {
    .card {
      width: 100%;
      margin-bottom: 10px;
    }
  }


  
    
    
    

    
    

    Hello, world!
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal